uni-app——下拉框多选

news2024/11/14 2:30:01

 一、组件components/my-selectCheckbox.vue

<template>
	<view class="uni-stat__select">
		<span v-if="label" class="uni-label-text">{{label + ':'}}</span>
		<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
			<view class="uni-select" :style="{height:multiple?'100%':' 35px;'}"
				:class="{'uni-select--disabled':disabled}">
				<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px;'}" @click="toggleSelector">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
						<view class="tag-calss"
							v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
							:key="item[dataValue]">
							<span class="text">{{item[dataKey]}}</span>
							<view class="" @click.stop="delItem(item)">
								<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
							</view>
						</view>
						<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
							<span class="text">+{{current.length-collapseTagsNum}}</span>
						</view>
					</view>
					<view v-else-if="current&&current.length>0&&!filterable" class="uni-select__input-text">{{current}}
					</view>
					<input v-else-if="filterable" class="uni-select__input-text" type="text" style="font-size: 12px;"
						:placeholder="placeholderOld" v-model="current">
					<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
					<uni-icons v-if="current && clear" type="clear" color="#c0c4cc" size="24" @click="clearVal" />
					<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
				</view>
				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
				<view class="uni-select__selector" v-if="showSelector">
					<view class="uni-popper__arrow"></view>
					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
						<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
							<span>{{emptyTips}}</span>
						</view>
						<view v-else class="uni-select__selector-item"
							style="display: flex;justify-content: space-between;align-items: center;"
							v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
							<span
								:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
							<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
								color="#007aff" />
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * DataChecklist 数据选择器
	 * @description 通过数据渲染的下拉框组件
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
	 * @property {String} value 默认值
	 * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
	 * @property {Boolean} clear 是否可以清空已选项
	 * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
	 * @property {String} label 左侧标题
	 * @property {String} placeholder 输入框的提示文字
	 * @property {Boolean} disabled 是否禁用
	 * @event {Function} change  选中发生变化触发
	 */

	export default {
		name: "my-selectCheckbox",
		mixins: [uniCloud.mixinDatacom || {}],
		props: {
			collapseTagsNum: {
				type: Number,
				default: 1
			},
			collapseTags: {
				type: Boolean,
				default: false
			},
			dataKey: {
				type: [String],
				default: 'text'
			},
			dataValue: {
				type: [String],
				default: 'value'
			},
			multiple: {
				type: Boolean,
				default: false
			},
			filterable: {
				type: Boolean,
				default: false
			},
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			// #ifndef VUE3
			value: {
				type: [String, Number, Array],
				default: ''
			},
			// #endif
			// #ifdef VUE3
			modelValue: {
				type: [String, Number, Array],
				default: ''
			},
			// #endif
			label: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			emptyTips: {
				type: String,
				default: '无选项'
			},
			clear: {
				type: Boolean,
				default: true
			},
			defItem: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
			format: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				showSelector: false,
				current: [],
				mixinDatacomResData: [],
				apps: [],
				channels: [],
				cacheKey: "uni-data-select-lastSelectedValue",
				placeholderOld: "",
				currentArr: []
			};
		},
		created() {
			if (this.multiple) {
				// #ifndef VUE3
				this.currentArr = this.value || []
				// #endif
				// #ifdef VUE3
				this.currentArr = this.modelValue || []
				// #endif
				if (!this.current) {
					this.current = []
				}
				// #ifndef VUE3
				if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
					this.value.forEach(item => {
						let current = this.filterMixinDatacomResData.find(e =>
							e[this.dataValue] == item
						)
						this.current.push(current)
					})
				}
				// #endif
				// #ifdef VUE3
				if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
					this.modelValue.forEach(item => {
						let current = this.filterMixinDatacomResData.find(e =>
							e[this.dataValue] == item
						)
						this.current.push(current)
					})
				}
				// #endif

			} else {

				// #ifndef VUE3
				if (this.value) {
					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
						e[this.dataValue] == this.value
					))
				}
				// #endif
				// #ifdef VUE3
				if (this.modelValue) {
					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
						e[this.dataValue] == this.modelValue
					))
				}
				// #endif
			}
			this.placeholderOld = this.placeholder
			this.debounceGet = this.debounce(() => {
				this.query();
			}, 300);
			if (this.collection && !this.localdata.length) {
				this.debounceGet();
			}
		},
		computed: {
			filterMixinDatacomResData() {
				if (this.filterable && this.current) {
					return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.current))
				} else {
					return this.mixinDatacomResData
				}
			},
			typePlaceholder() {
				const text = {
					'opendb-stat-app-versions': '版本',
					'opendb-app-channels': '渠道',
					'opendb-app-list': '应用'
				}
				const common = this.placeholder
				const placeholder = text[this.collection]
				return placeholder ?
					common + placeholder :
					common
			},
			valueCom() {
				// #ifdef VUE3
				return this.modelValue;
				// #endif
				// #ifndef VUE3
				return this.value;
				// #endif
			}
		},
		watch: {
			localdata: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {
						this.mixinDatacomResData = val
					}

				}
			},
			valueCom(val, old) {
				this.initDefVal()
			},
			mixinDatacomResData: {
				immediate: true,
				handler(val) {
					if (val.length) {
						this.initDefVal()
					}
				}
			},
			// modelValue(val) {
			// 	if (this.multiple && val && val.length > 0) {
			// 		this.currentArr = val
			// 		if (!this.current) {
			// 			this.current = []
			// 		}
			// 		val.forEach(item => {
			// 			let current = this.filterMixinDatacomResData.find(e =>
			// 				e[this.dataValue] == item
			// 			)
			// 			this.current.push(current)
			// 		})
			// 	} else {
			// 		if (val) {
			// 			this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
			// 				e[this.dataValue] == val
			// 			))
			// 		}
			// 	}

			// },
			// value(val) {
			// 	if (this.multiple && val && val.length > 0) {
			// 		this.currentArr = val
			// 		if (!this.current) {
			// 			this.current = []
			// 		}
			// 		val.forEach(item => {
			// 			let current = this.filterMixinDatacomResData.find(e =>
			// 				e[this.dataValue] == item
			// 			)
			// 			this.current.push(current)
			// 		})
			// 	} else {
			// 		if (val) {
			// 			this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
			// 				e[this.dataValue] == val
			// 			))
			// 		}
			// 	}

			// }
		},
		methods: {
			debounce(fn, time = 100) {
				let timer = null
				return function(...args) {
					if (timer) clearTimeout(timer)
					timer = setTimeout(() => {
						fn.apply(this, args)
					}, time)
				}
			},
			// 执行数据库查询
			query() {
				this.mixinDatacomEasyGet();
			},
			// 监听查询条件变更事件
			onMixinDatacomPropsChange() {
				if (this.collection) {
					this.debounceGet();
				}
			},
			initDefVal() {
				let defValue = ''
				if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
					defValue = this.valueCom
				} else {
					let strogeValue
					if (this.collection) {
						strogeValue = this.getCache()
					}
					if (strogeValue || strogeValue === 0) {
						defValue = strogeValue
					} else {
						let defItem = ''
						if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
							defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
						}
						defValue = defItem
					}
					if (defValue || defValue === 0) {
						this.emit(defValue)
					}
				}
				if (this.multiple) {
					this.current = []
					defValue.forEach(item => {
						let current = this.filterMixinDatacomResData.find(e =>
							e[this.dataValue] == item
						)
						this.current.push(current)
					})
				} else {
					const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
					this.current = def ? this.formatItemName(def) : ''
				}
			},

			/**
			 * @param {[String, Number]} value
			 * 判断用户给的 value 是否同时为禁用状态
			 */
			isDisabled(value) {
				let isDisabled = false;

				this.mixinDatacomResData.forEach(item => {
					if (item[this.dataValue] === value) {
						isDisabled = item.disable
					}
				})

				return isDisabled;
			},

			clearVal() {
				if (this.multiple) {
					this.current = []
					this.currentArr = []
					this.emit([])
				} else {
					this.current = ""
					this.currentArr = []
					this.emit('')
				}
				if (this.collection) {
					this.removeCache()
				}
				this.placeholderOld = this.placeholder
			},
			change(item) {
				if (!item.disable) {
					this.showSelector = false
					if (this.multiple) {
						if (!this.current) {
							this.current = []
						}
						if (!this.currentArr) {
							this.currentArr = []
						}
						if (this.currentArr.includes(item[this.dataValue])) {
							let index = this.current.findIndex(e => {
								return e[this.dataValue] == item[this.dataValue]
							})
							this.current.splice(index, 1)
							this.currentArr.splice(index, 1)
							this.emit(this.current)
						} else {
							this.current.push(item)
							this.currentArr.push(item[this.dataValue])
							this.emit(this.current)
						}
					} else {
						this.current = this.formatItemName(item)
						this.emit(item[this.dataValue])
					}
				}
			},
			delItem(item) {
				if (this.currentArr.includes(item[this.dataValue])) {
					let index = this.current.findIndex(e => {
						return e[this.dataValue] == item[this.dataValue]
					})
					this.current.splice(index, 1)
					this.currentArr.splice(index, 1)
					this.emit(this.current)
				}
			},
			emit(val) {
				this.$emit('change', val)
				if (this.multiple) {
					this.$emit('input', this.currentArr)
					this.$emit('update:modelValue', this.currentArr)
				} else {
					this.$emit('input', val)
					this.$emit('update:modelValue', val)
				}
				if (this.collection) {
					this.setCache(val);
				}
			},
			toggleSelector() {
				if (this.disabled) {
					return
				}
				if (this.filterable && this.current && this.mixinDatacomResData.findIndex(e => {
						return e[this.dataKey] == this
							.current
					}) < 0) {
					this.current = ""
				}
				this.showSelector = !this.showSelector
				if (this.filterable && this.current && this.showSelector) {
					this.placeholderOld = this.current
					this.current = ""
				} else if (this.filterable && !this.current && !this.showSelector) {
					if (this.placeholderOld != this.placeholder) {
						this.current = this.placeholderOld
					}
				}

			},
			formatItemName(item) {
				if (!item) {
					return ""
				}
				let text = item[this.dataKey]
				let value = item[this.dataValue]
				let {
					channel_code
				} = item
				channel_code = channel_code ? `(${channel_code})` : ''
				if (this.format) {
					// 格式化输出
					let str = "";
					str = this.format;
					for (let key in item) {
						str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
					}
					return str;
				} else {
					return this.collection.indexOf('app-list') > 0 ?
						`${text}(${value})` :
						(
							text ?
							text :
							`未命名${channel_code}`
						)
				}
			},
			// 获取当前加载的数据
			getLoadData() {
				return this.mixinDatacomResData;
			},
			// 获取当前缓存key
			getCurrentCacheKey() {
				return this.collection;
			},
			// 获取缓存
			getCache(name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				return cacheData[name];
			},
			// 设置缓存
			setCache(value, name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				cacheData[name] = value;
				uni.setStorageSync(this.cacheKey, cacheData);
			},
			// 删除缓存
			removeCache(name = this.getCurrentCacheKey()) {
				let cacheData = uni.getStorageSync(this.cacheKey) || {};
				delete cacheData[name];
				uni.setStorageSync(this.cacheKey, cacheData);
			},
		}
	}
</script>

<style lang="scss">
	$uni-base-color: #6a6a6a !default;
	$uni-main-color: #333 !default;
	$uni-secondary-color: #909399 !default;
	$uni-border-3: #e5e5e5;


	/* #ifndef APP-NVUE */
	@media screen and (max-width: 500px) {
		.hide-on-phone {
			display: none;
		}
	}

	/* #endif */
	.uni-stat__select {
		display: flex;
		align-items: center;
		// padding: 15px;
		cursor: pointer;
		width: 100%;
		flex: 1;
		box-sizing: border-box;
	}

	.uni-stat-box {
		width: 100%;
		flex: 1;
	}

	.uni-stat__actived {
		width: 100%;
		flex: 1;
		// outline: 1px solid #2979ff;
	}

	.uni-label-text {
		font-size: 14px;
		font-weight: bold;
		color: $uni-base-color;
		margin: auto 0;
		margin-right: 5px;
	}

	.uni-select {
		font-size: 14px;
		border: 1px solid $uni-border-3;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		user-select: none;
		/* #endif */
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1px $uni-border-3;
		width: 100%;
		flex: 1;
		height: 35px;
		min-height: 35px;

		&--disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}
	}

	.uni-select__label {
		font-size: 16px;
		// line-height: 22px;
		min-height: 35px;
		height: 35px;
		padding-right: 10px;
		color: $uni-secondary-color;
	}

	.uni-select__input-box {
		height: 35px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;

		.tag-calss {
			font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
			font-weight: 400;
			-webkit-font-smoothing: antialiased;
			-webkit-tap-highlight-color: transparent;
			font-size: 12px;
			border: 1px solid #d9ecff;
			border-radius: 4px;
			white-space: nowrap;
			height: 24px;
			padding: 0 4px 0px 8px;
			line-height: 22px;
			box-sizing: border-box;
			margin: 2px 0 2px 6px;
			display: flex;
			max-width: 100%;
			align-items: center;
			background-color: #f4f4f5;
			border-color: #e9e9eb;
			color: #909399;

			.text {
				font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
				font-weight: 400;
				-webkit-font-smoothing: antialiased;
				-webkit-tap-highlight-color: transparent;
				font-size: 12px;
				white-space: nowrap;
				line-height: 22px;
				color: #909399;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.uni-select__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
	}

	.uni-select__input-plac {
		font-size: 14px;
		color: $uni-secondary-color;
	}

	.uni-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 3;
		padding: 4px 0;
	}

	.uni-select__selector-scroll {
		/* #ifndef APP-NVUE */
		max-height: 200px;
		box-sizing: border-box;
		/* #endif */
	}

	.uni-select__selector-empty,
	.uni-select__selector-item {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		line-height: 35px;
		font-size: 14px;
		text-align: center;
		/* border-bottom: solid 1px $uni-border-3; */
		padding: 0px 10px;
	}

	.uni-select__selector-item:hover {
		background-color: #f9f9f9;
	}

	.uni-select__selector-empty:last-child,
	.uni-select__selector-item:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	.uni-select__selector__disabled {
		opacity: 0.4;
		cursor: default;
	}

	/* picker 弹出层通用的指示小三角 */
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-select__input-text {
		// width: 280px;
		width: 100%;
		color: $uni-main-color;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow: hidden;
	}

	.uni-select__input-placeholder {
		color: $uni-base-color;
		font-size: 12px;
	}

	.uni-select--mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
</style>

二、页面使用

<template>
	<view>
		<uni-section title="基础多选" type="line">
			<view class="uni-px-5 uni-pb-5">
				<mySelectCheckbox v-model="value1" multiple dataKey="label" dataValue="value" :localdata="data"  
					@change="change"></mySelectCheckbox>
			</view>
		</uni-section>
		<uni-section title="基础多选(合并)" type="line">
			<view class="uni-px-5 uni-pb-5">
				<mySelectCheckbox v-model="value1" collapse-tags multiple dataKey="label" dataValue="value"
					:localdata="data" @change="change"></mySelectCheckbox>
			</view>
		</uni-section>
		<uni-section title="基础多选(可通过collapse-tags-num设置超过数量省略)" type="line">
			<view class="uni-px-5 uni-pb-5">
				<mySelectCheckbox v-model="value1" collapse-tags :collapse-tags-num="3" multiple dataKey="label"
					dataValue="value" :localdata="data" @change="change"></mySelectCheckbox>
			</view>
		</uni-section>
	</view>
</template>
<script>
	import mySelectCheckbox from '../../components/my-selectCheckbox.vue'
	export default {
		components:{mySelectCheckbox},
		data() {
			return {
				value1: ["选项1"],
				data: []
			}
		},
		watch: {
			value1(newval) {
				console.log('newval', newval);
			}
		},
		created() {
			setTimeout(() => {
				this.data = [{
					value: '选项1',
					label: '清华大学'
				}, {
					value: '选项2',
					label: '北京大学'
				}, {
					value: '选项3',
					label: '北京航空航天大学'
				}, {
					value: '选项4',
					label: '北京理工大学'
				}, {
					value: '选项5',
					label: '中国人民大学'
				}, {
					value: '选项6',
					label: '北京科技大学'
				}, {
					value: '选项7',
					label: '北京交通大学'
				}]
			}, 1000)
		},
		methods: {
			change(e) {
				console.log('e:', e);
			}
		}
	}
</script>

<style>
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/839726.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot实现数据库读写分离

SpringBoot实现数据库读写分离 参考博客https://blog.csdn.net/qq_31708899/article/details/121577253 实现原理&#xff1a;翻看AbstractRoutingDataSource源码我们可以看到其中的targetDataSource可以维护一组目标数据源(采用map数据结构)&#xff0c;并且做了路由key与目标…

《华为认证》SR-MPLS-TE

实验需求&#xff1a;运营商网络配置SR-MPLS-TE&#xff0c;实现CE1和CE2之间的互访流量通过PE1-P2-P4-PE3。 步骤1&#xff1a;配置运营商网络的IGP协议&#xff08;本实验采用ISIS协议&#xff09; PE1&#xff1a; isis 1is-level level-2cost-style widenetwork-entity 49…

一个.NET开发的Web版Redis管理工具

今天给大家推荐一款web 版的Redis可视化工具WebRedisManager&#xff0c;即可以作为单机的web 版的Redis可视化工具来使用&#xff0c;也可以挂在服务器上多人管理使用的web 版的Redis可视化工具。 WebRedisManager基于SAEA.Socket通信框架中的SAEA.RedisSocket、SAEA.WebApi两…

Python实现决策树算法:完整源码逐行解析

决策树是一种常用的机器学习算法&#xff0c;它可以用来解决分类和回归问题。决策树的优点是易于理解和解释&#xff0c;可以处理数值和类别数据&#xff0c;可以处理缺失值和异常值&#xff0c;可以进行特征选择和剪枝等操作。决策树的缺点是容易过拟合&#xff0c;对噪声和不…

云原生应用里的服务发现

服务定义&#xff1a; 服务定义是声明给定服务如何被消费者/客户端使用的方式。在建立服务之间的同步通信通道之前&#xff0c;它会与消费者共享。 同步通信中的服务定义&#xff1a; 微服务可以将其服务定义发布到服务注册表&#xff08;或由微服务所有者手动发布&#xff09;…

内网穿透:ngrok使用教程

一、前言 平时我们在本地8080端口创建一个服务的时候&#xff0c;都是使用localhost:8080访问我们的web服务。但是外网是不能访问我们的web服务的。这时&#xff0c;如果你要实现外网访问的功能就需要实现内网穿透&#xff0c;ngrok就是可以帮我们实现这个功能。 二、ngrok介…

岩土工程仪器多通道振弦传感器信号转换器应用于隧道安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于隧道安全监测 多通道振弦传感器信号转换器VTI104_DIN 是轨道安装式振弦传感器信号转换器&#xff0c;可将振弦、温度传感器信号转换为 RS485 数字信号和模拟信号输出&#xff0c;方便的接入已有监测系统。 传感器状态 专用指示灯方…

unraid docker桥接模式打不开页面,主机模式正常

unraid 80x86版filebrowser&#xff0c;一次掉电后&#xff0c;重启出现权限问题&#xff0c;而且filebrowser的核显驱动不支持amd的VA-API 因为用不上核显驱动&#xff0c;解压缩功能也用不上&#xff0c;官方版本的filebrowser还小巧一些&#xff0c;18m左右 安装的时候总是…

QTableWidget对单元格(QWidget/QTableWidgetItem)的内存管理[clearContents()]

目录 现象结论代码验证clearContents() 会释放QTableWidgetItem 和QWidget 对象&#xff0c;但是不指向nullptrmemorytable.hmemorytable.cpp断点情况 验证clearContents()是延时释放QWidget 的而QTableWidgetItem 立即释放 现象 结论 clearContents() 会清除表格中的所有单元格…

小程序 view下拉滑动导致scrollview滑动事件失效

小程序页面需要滑动功能 下拉时滑动&#xff0c;展示整个会员卡内容&#xff0c; 下拉view里包含了最近播放&#xff1a;有scrollview&#xff0c;加了下拉功能后&#xff0c;scrollview滑动失败了。 <view class"cover-section" catchtouchstart"handletou…

eNSP:ospf和mgre的配置

实验要求&#xff1a; 第一步&#xff1a;路由、IP的配置 r1&#xff1a; <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sys r1 [r1]int loop0 [r1-LoopBack0]ip add 192.168.1.1 24 [r1-LoopBack0]int g0/0/0 [r1-GigabitEthernet0/0/0]ip a…

部署Tomcat和jpress应用

静态页面&#xff1a;静态页面是指在服务器上提前生成好的HTML文件&#xff0c;每次用户请求时直接返回给用户。静态页面的内容是固定的&#xff0c;不会根据用户的请求或其他条件进行变化。静态页面的优点是加载速度快&#xff0c;对服务器资源要求较低&#xff0c;但缺点是无…

git报错:Error merging: refusing to merge unrelated histories

碰对了情人&#xff0c;相思一辈子。 打命令&#xff1a;git pull origin master --allow-unrelated-histories 然后等一会 再push 切记不要有冲突的代码 需要改掉~

Spring Cloud Eureka 和 zookeeper 的区别

CAP理论 在了解eureka和zookeeper区别之前&#xff0c;我们先来了解一下这个知识&#xff0c;cap理论。 1998年的加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式有三个指标。Consistency&#xff0c;Availability&#xff0c;Partition tolerance。简称即为CAP。…

一则简单代码的汇编分析

先通过Xcode创建一个terminal APP&#xff0c;语言选择C。代码如下&#xff1a; #include <stdio.h>int main(int argc, const char * argv[]) {int a[7]{1,2,3,4,5,6,7};int *ptr (int*)(&a1);printf("%d\n",*(ptr));return 0; } 在return 0处打上断点&…

AcWing 24:机器人的运动范围 ← BFS、DFS

【题目来源】https://www.acwing.com/problem/content/description/22/【题目描述】 地上有一个 m 行和 n 列的方格&#xff0c;横纵坐标范围分别是 0∼m−1 和 0∼n−1。 一个机器人从坐标 (0,0) 的格子开始移动&#xff0c;每一次只能向左&#xff0c;右&#xff0c;上&#…

设计模式--策略模式(由简单工厂到策略模式到两者结合图文详解+总结提升)

目录 概述概念组成应用场景注意事项类图 衍化过程需求简单工厂实现图代码 策略模式图代码 策略模式简单工厂图代码 总结升华版本迭代的优化点及意义什么样的思路进行衍化的扩展思考--如何理解策略与算法 概述 概念 策略模式是一种行为型设计模式&#xff0c;它定义了算法家族&…

Docker安装Grafana以及Grafana应用

Doker基础 安装 1、 卸载旧的版本 sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 2、需要的安装包 sudo yum install -y yum-utils 3、设置镜像的仓库 yum-config-m…

UML-构件图

目录 1.概述 2.构件的类型 3.构件和类 4.构件图 1.概述 构件图主要用于描述各种软件之间的依赖关系&#xff0c;例如&#xff0c;可执行文件和源文件之间的依赖关系&#xff0c;所设计的系统中的构件的表示法及这些构件之间的关系构成了构件图 构件图从软件架构的角度来描述…

数组的学习

数组学习 文章目录 数组来由数组的使用数组的内存图变量声明和args参数说明声明分配空间值的省略写法数组的length属性数列输出求和判断购物金额结算Arrays的sort和toString方法Arrays的equals和fill和copyOf和binarySearch方法字符数组顺序和逆序输出 数组来由 录入30个学生…