天蓝色网站,建购物网站 教程,dw怎么做百度页面网站,怎么修改网站上的内容采用 uniapp-vue3 实现, 是一款带有丝滑动画效果的单选框组件#xff0c;提供点状、条状的动画过渡效果#xff0c;支持多项自定义配置#xff0c;适配 web、H5、微信小程序#xff08;其他平台小程序未测试过#xff0c;可自行尝试#xff09; 可到插件市场下载尝试提供点状、条状的动画过渡效果支持多项自定义配置适配 web、H5、微信小程序其他平台小程序未测试过可自行尝试 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id21740
使用示例 示例代码
templateviewview classlight stylebackground-color: whiteviewview classflex-center默认样式/viewwo-radio-hopping/wo-radio-hopping/view/viewview classlight stylebackground-color: whiteview classflex-center数据集、默认选中、选中事件/viewwo-radio-hopping v-model:optionsstate.items v-model:defaultValuestate.default on-changechangeEvent/wo-radio-hopping/viewview classlight stylebackground-color: whiteviewview classflex-center条状动画/viewwo-radio-hopping :lineAnimationtrue/wo-radio-hopping/view/viewview classlight stylebackground-color: whiteviewview classflex-center主题色/viewwo-radio-hopping :primary#55bc8a/wo-radio-hopping/view/viewview classlight stylebackground-color: whiteviewview classflex-center方框/viewwo-radio-hopping :circlefalse/wo-radio-hopping/view/viewview classlight stylebackground-color: whiteviewview classflex-center选择框样式(通过css的box-shadow属性去设置)/viewwo-radio-hopping :frameBoxShadow/wo-radio-hoppingwo-radio-hopping :frameBoxShadow0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 1px rgba(0, 0, 0, 0.2) inset/wo-radio-hopping/view/viewview classlight stylebackground-color: whiteview stylepadding: 0 20px;view classflex-center插槽自定义内容/viewwo-radio-hopping v-model:optionsstate.items v-slotslotProps on-changechangeEventview styledisplay: flex; justify-content: space-between;padding: 10px;view{{ slotProps.data.label }}/viewview classtag{{ slotProps.data.tag }}/view/view/wo-radio-hopping/view/viewview classdarkviewview classflex-center暗黑模式/viewwo-radio-hopping v-model:optionsstate.items v-slotslotProps on-changechangeEventview styledisplay: flex; justify-content: space-between;view{{ slotProps.data.label }}/viewview classtag{{ slotProps.data.tag }}/view/view/wo-radio-hopping/view/view/view/templatescript setup langtsimport { reactive } from vue;const state reactive({items: [{value: 1,label: 苹果味,tag: 饮料},{value: 2,label: 香蕉味,tag: 酒水},{value: 3,label: 火龙果味,tag: 饮料},{value: 4,label: 西瓜味,tag: 饮料},{value: 5,label: 哈密瓜味,tag: 酒水},{value: 6,label: 榴莲味,tag: 酒水}],default: 4,});const changeEvent (el) {console.log(点击, el);}
/scriptstyle langscss scoped.flex-center {display: flex;justify-content: center;align-items: center;}.light {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,90%);overflow: auto;}.dark {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,10%);color: white;overflow: auto;}.tag {background-color: #1BA035;color: white;font-size: 10px;display: flex;align-items: center;justify-content: center;border-radius: 4px;padding: 0 4px;}
/style
