网页网站设计与制作,wordpress微信打赏功能添加,网站建设的几个阶段,是什么网站建设图标样式
修改图标的样式
通过color参数修改图标的颜色通过size参数修改图标的大小#xff0c;单位为rpx
效果图 u-icon namephoto color#2979ff size28/u-icon图片图标 1.3.0
这里说的图片图标#xff0c;指的是小…图标样式
修改图标的样式
通过color参数修改图标的颜色通过size参数修改图标的大小单位为rpx
效果图 u-icon namephoto color#2979ff size28/u-icon图片图标 1.3.0
这里说的图片图标指的是小图标起作用定位为icon图标作用而非大尺寸的图片展示场景理论上这个小图标应该为png格式的正方形图标。
上面说到给组件的name参数传入一个图片的名称即可显示字体图标这些名称中不能带有/斜杠符号否则会被认为是传入了图片图标同时size参数 也被设置为这个图片图标的宽度由于是图片诸如颜色color等参数都会失效。
u-icon labeluView size40 namehttps://cdn.uviewui.com/uview/example/button.png/u-icon效果图 u-image width100% height300rpx :srcsrc/u-image 设置按钮为半圆形
shape默认值为square(按钮为圆角矩形)设置为circle则按钮两边为半圆形
u-button shapesquare乌啼/u-button设置尺寸
button组件的size可选值为default(默认)mini(小尺寸)和medium(中等尺寸)
u-button sizedefault江湖/u-button
u-button sizemedium夜雨/u-button
u-button sizemini十年灯/u-button设置点击按钮的水波纹效果
该效果通过给按钮绝对定位形式覆盖一个view点击时改变view的scaleopacity样式属性形成扩散再消失的水波纹效果。
u-button :rippletrue十年/u-button!-- 通过rippleBgColor设置水波纹的背景颜色 --
u-button :rippletrue ripple-bg-color#909399之约/u-buttonTag 标签 该组件一般用于标记和选择有如下特点
mode参数可以设置3种模式dark(深色背景)、light(浅色背景)、plain(白色背景)shape参数可以设置多种形状circle两边半圆形, square方形带圆角circleLeft左边半圆circleRight右边半圆type参数可以设置5种主题primarysuccesswarningerrorinfo 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ 基本使用
通过type参数设置主题类型默认为primarytext设置标签内容
u-tag text雪月夜 typesuccess /设置标签的类型
通过设置mode参数可以设置标签的类型dark(深色背景)、light(浅色背景)、plain(白色背景)
u-tag text一丘之貉 modedark /
u-tag text沆瀣一气 modelight /
u-tag text狼狈为奸 modeplain /设置标签的形状
通过shape参数可以设置标签的形状默认是square方形带圆角可选circle两边半圆形, circleLeft左边半圆circleRight右边半圆
u-tag text主谓宾 shapecircle /
u-tag text定状补 shapecircleLeft /设置标签是否可以关闭
效果图 设置closeable参数为true会在标签上自动添加一个关闭图标 设置可关闭后点击关闭按钮会发出close事件回调中手动设置show参数为false可以隐藏Tag
templateu-tag text要清楚 closeable :showshow closetagClick /
/templatescriptexport default {data() {return {show: true}},methods: {tagClick(index) {this.show false;}}}
/scriptInput 输入框 1.3.0
效果图 此组件为一个输入框默认没有边框和样式是专门为配合表单组件u-form而设计的利用它可以快速实现表单验证输入内容下拉选择等功能。
注意 当您仅是需要一个输入框的话可以考虑使用u-field组件而如果是一个表单组比如有多个输入框一起且需要验证功能的时候 应该在u-form中嵌套u-form-item再嵌套u-input去实现。 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ 基本使用
通过v-model绑定输入框的值通过type设置输入框的类型通过border配置是否显示输入框的边框
templateu-input v-modelvalue :typetype :borderborder /
/templatescriptexport default {data() {return {value: ,type: text,border: true}}}
/script日历模式
mode为date只能选择单个日期mode为range可以选择日期范围 单个日期模式
选择日期后需要点击底部的确定按钮才能触发回调事件回调参数为一个对象有如下属性
{day: 4, // 选择了哪一天days: 30, // 这个月份有多少天isToday: true, // 选择的日期是否今天month: 6, // 选择的月份result: 2020-06-04, // 选择的日期整体值week: 星期四, // 选择日期所属的星期数year: 2020 , // 选择的年份
}示例代码
templateu-calendar v-modelshow :modemode changechange/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {change(e) {console.log(e);}}}
/script效果图 自定义内容
效果图 组件有一个默认插槽名为tooltip传入的内容将会显示在键盘的顶部位置如使用需要为传入的内容自定义样式。
templateu-calendar month-arrow-color#FF55FFyear-arrow-color#FF55FFcolor#FF55FFactive-bg-color#FF55FFactive-color#FF22FFrange-bg-color#FF22FFrange-color#FF22FFv-modelshow :modemode changechangeview slottooltipview classtitle请选择住店/离店时间/view/view/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {change(e) {console.log(e);}}}
/scriptstyle langscss scoped.title{color: $u-type-primary;text-align: center;padding: 20rpx 0 0 0;}
/styleAPI
Props
参数说明类型默认值可选值mode选择日期的模式date-为单个日期range-为选择日期范围Stringdaterangev-model布尔值变量用于控制日历的弹出与收起Booleanfalsetruesafe-area-inset-bottom是否开启底部安全区适配Booleanfalsetruechange-year是否显示顶部的切换年份方向的按钮Booleantruefalsechange-month是否显示顶部的切换月份方向的按钮Booleantruefalsemax-year可切换的最大年份Number | String2050-min-year可切换的最小年份Number | String1950-min-date最小可选日期Number | String1950-01-01-max-date最大可选日期Number | String当前日期-border-radius弹窗顶部左右两边的圆角值单位rpxNumber | String20-mask-close-able是否允许通过点击遮罩关闭日历Booleantruefalsemonth-arrow-color月份切换按钮箭头颜色String#606266-year-arrow-color年份切换按钮箭头颜色String#909399-color日期字体的默认颜色String#303133-active-bg-color起始/结束日期按钮的背景色String#2979ff-z-index弹出时的z-index值String | Number10075-active-color起始/结束日期按钮的字体颜色String#ffffff-range-bg-color起始/结束日期之间的区域的背景颜色Stringrgba(41,121,255,0.13)-range-color选择范围内字体颜色String#2979ff-start-text起始日期底部的提示文字String开始-end-text结束日期底部的提示文字String结束-btn-type底部确定按钮的主题Stringprimarydefault / success / info/ warning / errortoolTip顶部提示文字如设置名为tooltip的slot此参数将失效String选择日期-closeable是否显示右上角的关闭图标Booleantruefalse select列选择器
效果图 单列模式
此方式使用较为简单需要传入一个一维数组数组的元素为对象要求必须有value和label属性这两个值也将会在回调中被返回。
templateu-select v-modelshow modesingle-column :listlist confirmconfirm/u-select
/templatescriptexport default {data() {return {show: true,list: [{value: 1,label: 江},{value: 2,label: 湖}],}},methods: {// 注意返回值为一个数组单列时取数组的第一个元素即可(只有一个元素)confirm(e) {console.log(e);}}}
/scriptKeyboard 键盘
效果图 此为uView自定义的键盘面板内含了数字键盘车牌号键身份证号键盘3种模式都有可以打乱按键顺序的选项。 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ 基本使用
通过mode参数定义键盘的类型v-model绑定一个值为布尔值的变量控制键盘的弹出与收起
mode number (默认值)为数字键盘此时顶部工具条中间的提示文字为数字键盘mode car 为汽车键盘此时顶部工具条中间的提示文字为车牌号键盘mode card 为身份证键盘此时顶部工具条中间的提示文字为身份证键盘
templateviewu-keyboard refuKeyboard modecar v-modelshow/u-keyboardu-button clickshow true打开/u-button/view
/templatescriptexport default {data() {return {show: false}}}
/scriptRate 评分 该组件一般用于满意度调查星型评分的场景。 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ 基本使用
通过count参数设置总共有多少颗星星可选择通过v-model双向绑定初始化时默认选中的星星数量 1.4.5新增通过current设置初始化时默认选中的星星数量(1.4.5后建议使用v-model的方式此参数为了向前兼容依然有效但优先级低于v-model)
templateu-rate :countcount v-modelvalue/u-rate
/templatescriptexport default {data() {return {count: 4,value: 2}}}
/script自定义样式
通过active-color设置选中的星星的颜色通过inactive-color设置未选中时星星的颜色通过gutter设置星星的间距左右内边距各占gutter的一半
u-rate active-color#FA3534 inactive-color#b2b2b2 gutter20/u-rate自定义图标
通过active-icon设置激活的图标通过inactive-icon设置未激活的图标通过custom-prefix设置自定义图标详见扩展自定义图标库
(opens new window)
下方示例为使用心形图标替代默认的星星图标
u-rate active-iconheart-fill inactive-iconheart/u-rate评分分级分层 1.7.2
通过colors设置不同颜色区分评分层级通过icons设置不同类型图标区分评分层级
templateviewu-rate v-modelvalue :colorscolors :iconsicons inactive-iconthumb-up/u-rate/view
/templatescriptexport default {data() {return {value: 2,colors: [#ffc454, #ffb409, #ff9500],icons: [thumb-down-fill, thumb-down-fill, thumb-up-fill, thumb-up-fill]}}}
/script最少选中的数量
u-rate :min-count5/u-rate禁用状态
禁用下无法点击或者滑动选择但是可以通过current设置默认选中的数量禁用状态下用来展示分数允许出现半星
u-rate :current3.7 :disabledtrue/u-rateAPI Props
参数说明类型默认值可选值v-model 1.4.5双向绑定选择星星的数量String | Number0-count最多可选的星星数量String | Number5-current默认选中的星星数量1.4.5起建议使用v-model方式String | Number0-disabled是否禁止用户操作Booleanfalsetruesize星星的大小单位rpxString | Number32-inactive-color未选中星星的颜色String#b2b2b2-active-color选中的星星颜色String#FA3534-gutter星星之间的距离String | Number10-min-count最少选中星星的个数String | Number0-active-icon选中时的图标名只能为uView的内置图标Stringstar-fill-inactive-icon未选中时的图标名只能为uView的内置图标Stringstar-custom-prefix 1.7.2自定义字体图标库时需要写上此值详见扩展自定义图标库
(opens new window)Stringuicon-colors 1.7.2颜色分级显示可以用不同颜色区分评分层级Array--icons 1.7.2图标分级显示可以用不同类型的icon区分评分层级Array--
实际应用效果图 template view u-keyboard refuKeyboard modenumber v-modelshow/u-keyboard u-button clickshow true打开/u-button u-rate changechange active-color#FA3534 inactive-color#b2b2b2 gutter20/u-rate /view /template script export default { data() { return { show: false, num: } }, methods:{ change(e){ console.log(e) } } } /script Events
事件名说明回调参数change选中的星星发生变化时触发value当前选中的星星的数量如果使用v-model双向绑定方式无需监听此事件
Search 搜索 template view u-keyboard refuKeyboard modenumber v-modelshow/u-keyboard u-button clickshow true打开/u-button u-rate changechange_rate active-color#FA3534 inactive-color#b2b2b2 gutter20/u-rate u-search changechange_search :show-actiontrue action-text搜索 :animationtrue bg-color#ffff7f color /u-search /view /template script export default { data() { return { show: false, num: } }, methods:{ change_rate(e){ console.log(e) }, change_search(e){ console.log(e) }, } } /script template view u-keyboard refuKeyboard modenumber v-modelshow/u-keyboard u-button clickshow true打开/u-button u-rate changechange_rate active-color#FA3534 inactive-color#b2b2b2 gutter20/u-rate u-search changechange_search :show-actiontrue action-text搜索 :animationtrue bg-color#ffff7f color /u-search /view /template script export default { data() { return { show: false, num: } }, methods:{ change_rate(e){ console.log(e) }, change_search(e){ console.log(e) }, } } /script NumberBox 步进器 template u-number-box v-modelvalue changevalChange/u-number-box /template script export default { data() { return { value: 0 } }, methods: { valChange(e) { console.log(当前值为: e.value) } } } /script Upload 上传 该组件用于上传图片场景 template view u-upload refuUpload :actionaction :auto-uploadfalse /u-upload u-button clicksubmit提交/u-button /view /template script export default { data() { return { // 非真实地址 action: http://www.example.com/upload, } }, methods: { submit() { this.$refs.uUpload.upload(); }, } } /script VerificationCode 验证码倒计时 template view classwrap u-toast refuToast/u-toast u-verification-code :secondsseconds endend startstart refuCode changecodeChange/u-verification-code u-button tapgetCode{{tips}}/u-button /view /template script export default { data() { return { tips: , // refCode: null, seconds: 10, } }, onReady() { // 注意这里不能将一个组件赋值给data的一个变量否则在微信小程序会 // 造成循环引用而报错如果你想这样做请在非data中定义refCode变量 // this.refCode this.$refs.uCode; }, methods: { codeChange(text) { this.tips text; }, getCode() { if(this.$refs.uCode.canGetCode) { // 模拟向后端请求验证码 uni.showLoading({ title: 正在获取验证码 }) setTimeout(() { uni.hideLoading(); // 这里此提示会被this.start()方法中的提示覆盖 this.$u.toast(验证码已发送); // 通知验证码组件内部开始倒计时 this.$refs.uCode.start(); }, 2000); } else { this.$u.toast(倒计时结束后再发送); } }, end() { this.$u.toast(倒计时结束); }, start() { this.$u.toast(倒计时开始); } } } /script style langscss scoped .wrap { padding: 24rpx; } /style 手机验证码需要用到阿里云的短信服务搭配以下两个组件使用 Checkbox 复选框 复选框组件一般用于需要多个选择的场景该组件功能完整使用方便
平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ 基本使用
该组件无需强制搭配checkboxGroup组件使用(视情况而定)可以单个独立使用u-checkbox组件通过v-model给checkbox绑定一个变量这个绑定的变量是双向的(初始值只能是true或者false)也就是说您可以无需监听checkbox或者checkboxGroup组件的change事件也能知道哪个复选框 被勾选了
templateview classu-checkbox-group changecheckboxGroupChangeu-checkbox changecheckboxChange v-modelitem.checked v-for(item, index) in list :keyindex :nameitem.name{{item.name}}/u-checkbox/u-checkbox-groupu-button clickcheckedAll全选/u-button/view
/templatescript
export default {data() {return {list: [{name: apple,checked: false,disabled: false},{name: banner,checked: false,disabled: false},{name: orange,checked: false,disabled: false}]};},methods: {// 选中某个复选框时由checkbox时触发checkboxChange(e) {//console.log(e);},// 选中任一checkbox时由checkbox-group触发checkboxGroupChange(e) {// console.log(e);},// 全选checkedAll() {this.list.map(val {val.checked true;})}}
};
/scriptRadio 单选框 单选框用于有一个选择用户只能选择其中一个的场景。
平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√
基本使用
该组件需要搭配radioGroup组件使用以便用户进行操作时获得当前单选框组的选中情况当然您也可以单独对某个radio进行事件监听通过v-model给radioGroup组件绑定一个变量这个绑定的变量是双向的(初始值只能是true或者false)也就是说您可以无需监听radio或者radioGroup组件的change事件也能知道哪个 被勾选了
注意 由于radio组件需要由radioGroup组件提供参数值这些父子组件间通过Vue的provide/inject特性注入依赖 所以您必须使用radioGroup包裹radio组件才能正常使用。
