wordpress建手机网站,怎么在wordpress免费注册博客网站,外贸网站seo招聘,网站开发到发布采用uniapp-vue3实现的一款单选框卡片选择器#xff0c;纯CSS实现样式和交互#xff0c;提供丝滑的动画选中效果#xff0c;支持不同主题配置#xff0c;适配多端 可到插件市场下载尝试#xff1a; https://ext.dcloud.net.cn/plugin?id16901
使用示例 示例代码
te… 采用uniapp-vue3实现的一款单选框卡片选择器纯CSS实现样式和交互提供丝滑的动画选中效果支持不同主题配置适配多端 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id16901
使用示例 示例代码
templateviewview classlightwo-card-radio v-model:optionsstate.items v-model:defaultValuestate.default on-changechangeEvent/wo-card-radio/viewview classdarkwo-card-radio v-model:optionsstate.items v-model:defaultValuestate.default v-model:styleObjstate.theme.dark on-changechangeEvent/wo-card-radio/view/view
/templatescript setup langts
import { reactive } from vue;
const state reactive({items: [{value: test,label: 中国农业银行,cardLinearColor: linear-gradient(45deg, #89c888, #1BA035)},{value: test2,label: 中国工商银行,cardLinearColor: linear-gradient(45deg, #ff8c75, #FF4A3B)},{value: test3,label: 中国建设银行,cardLinearColor: linear-gradient(45deg, #748DFB, #3859E8)},{value: test2,label: 中国华夏银行,cardLinearColor: linear-gradient(45deg, #616161, #484848)},],default: test3,theme: {light: {primary: blue,unselectedRadioBg: #eaeaea,selectedBg: hsla(0,0%,100%,0.5),},dark: {primary: blue,unselectedRadioBg: hsl(223,90%,30%),selectedBg: hsla(223,90%,30%,0.5)}}
});
const changeEvent (el) {console.log(点击, el);
}
/scriptstyle langscss scoped.light {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,90%);margin: 20px;height: 300px;overflow: auto;}.dark {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,10%);color: white;margin: 20px;height: 300px;overflow: auto;}
/style
