住建设部官方网站,最好的php网站开发工具,国内网络营销公司排名,网页制作模板源代码免费采用uniapp-vue3实现, 是一款支持高度自定义的标签选择器组件#xff0c;支持H5、微信小程序#xff08;其他小程序未测试过#xff0c;可自行尝试#xff09; 可到插件市场下载尝试#xff1a; https://ext.dcloud.net.cn/plugin?id14960
使用示例
template支持H5、微信小程序其他小程序未测试过可自行尝试 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id14960
使用示例
templateviewview classname标签选择器组件: wo-tag/viewview classcardview classheader属性-基本用法(包括disabled禁用)/viewview classcontentwoTag :default-valuestate.defaultValue :optionsstate.options change-selectonChangeTag/woTag/view/viewview classcardview classheader属性-行内滑动/viewview classcontentwoTag row :optionsstate.options change-selectonChangeTag/woTag/view/viewview classcardview classheader属性-多选/viewview classcontentwoTag mult :optionsstate.options change-selectonChangeTag/woTag/view/viewview classcardview classheader属性-限制选择个数最多可选2个开启多选的情况下可用/viewview classcontentwoTag mult :limit2 :optionsstate.options change-selectonChangeTag/woTag/view/viewview classcardview classheader属性-自定义初始化样式和激活样式/viewview classcontentwoTag :activate-stylestate.activateObj :init-stylestate.initObj :optionsstate.options change-selectonChangeTag/woTag/view/viewview classcardview classheader插槽-自定义显示内容/viewview classcontentwoTag mult :positionright :default-valuestate.selectValue :optionsstate.options change-selectonChangeTagOnetemplate v-slot:defaultslotPropsview styledisplay: flex;view stylepadding-right: 4rpx; v-ifstate.selectValue.includes(slotProps.item.value)✅/viewview stylepadding-right: 4rpx; v-else❌/viewtext{{ slotProps.item.label }}/text/view/template/woTag/view/view/view
/templatescript setup langts
import woTag from ./woTag.vue
import { reactive } from vue;const state reactive({options: [{label: 标签一,value: 0},{label: 标签二,value: 1},{label: 标签三,value: 2},{label: 标签四,value: 3},{label: 标签五,value: 4,disabled: true},{label: 标签六,value: 5},{label: 标签七,value: 6},],defaultValue: [2],selectValue: [2],activateObj: {border: 1rpx solid orange,background: #fff,color: orange,borderRadius: 30rpx,padding: 8rpx 12rpx},initObj: {border: 1rpx solid #f3f3f3,background: #fff,color: #333,borderRadius: 30rpx,padding: 8rpx 12rpx}
});
const onChangeTag (e: any) {console.log(选中的标签, e);
};
const onChangeTagOne (e: any) {state.selectValue []e.forEach(elemt {state.selectValue.push(elemt.value)})
};
/scriptstyle scoped
.flex-center {display: flex;justify-content: center;align-items: center;
}
.name {font-weight: bold;padding: 40rpx 0 10rpx 20rpx;
}
.card {background: #f1f1f1;margin: 40rpx 10rpx;padding: 30rpx;border-radius: 12rpx;
}
.header {font-size: 26rpx;display: flex;align-items: center;margin-bottom: 30rpx;
}
.content {font-size: 24rpx;
}
/style
