zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

二维码展示、增加swtich示例、侧边栏单独项可点击

pull/70/head
zq 5 days ago
parent
25e3a4dfa1
commit
60c187ee88
5 changed files with 157 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/components/GuipSwitch.vue
  2. 25
      src/components/SetLeftMenu.vue
  3. 2
      src/router/index.js
  4. 188
      src/views/agent/payInfoSetting.vue
  5. 11
      src/views/elementGroups.vue

22
src/components/GuipSwitch.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-form-item> <el-form-item>
<div class="flex switchWrap"> <div class="switchWrap">
<span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText <span :class="['switchDesc',{'fl':float =='left'},{'fr':float =='right'}]" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
}}</span> }}</span>
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs" <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs"
@ -47,6 +47,10 @@ export default {
type: String, type: String,
default: '#BABDC2', default: '#BABDC2',
}, },
float: {
type: String,
default: 'left',
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -94,18 +98,24 @@ export default {
</script> </script>
<style scoped> <style scoped>
.switchWrap { .switchWrap {
align-items: center; /* align-items: center; */
}
.fl{
float: left;
margin-right: 12px;
}
.fr{
float: right;
margin-left: 12px;
} }
.switchDesc { .switchDesc {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
line-height: 13px; line-height: 20px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
font-variation-settings: "opsz" auto; font-variation-settings: "opsz" auto;
/* text/text_3 */ /* text/text_3 */
color: #626573; color: #626573;
display: inline-block; display: inline-block;
margin-right: 15px;
} }
</style> </style>

25
src/components/SetLeftMenu.vue
View File

@ -3,8 +3,7 @@
<ul style="margin: 0;"> <ul style="margin: 0;">
<li v-for="(item, index) in menuList" :key="item.path + random()"> <li v-for="(item, index) in menuList" :key="item.path + random()">
<div <div
:class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']"> :class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
<!-- @click="gotoPath(item, index)" 暂时先注释 -->
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF" <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="($route.path == item.path || (item.noToPath && curIndex == index))" /> :isActive="($route.path == item.path || (item.noToPath && curIndex == index))" />
<span class="title_text">{{ item.name }}</span> <span class="title_text">{{ item.name }}</span>
@ -47,8 +46,8 @@ export default {
}, },
watch: { watch: {
'$route'(to, from) { '$route'() {
console.log(to, from); // console.log(to, from);
// 路由变化时重新计算位置 // 路由变化时重新计算位置
this.$nextTick(() => { this.$nextTick(() => {
this.calculateFloorOffsets(); this.calculateFloorOffsets();
@ -105,9 +104,18 @@ export default {
const scrollPosition = this.getScrollPosition(); const scrollPosition = this.getScrollPosition();
let activeFloor = null; let activeFloor = null;
console.log(this.curIndex,scrollPosition,'this.curIndex===');
// 从下往上查找当前可见区域对应的楼层 // 从下往上查找当前可见区域对应的楼层
for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) { // for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
// const item = this.menuList[this.curIndex].list[i];
// if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
// activeFloor = item.desc;
// break;
// }
// }
// 从上往下
for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
const item = this.menuList[this.curIndex].list[i]; const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量 if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
activeFloor = item.desc; activeFloor = item.desc;
@ -147,14 +155,15 @@ export default {
// ele.classList.remove('ceshi') // ele.classList.remove('ceshi')
// }, 1000) // }, 1000)
// } // }
gotoPath(item, index) { gotoPath(item) {
let path = item.path; let path = item.path;
this.activeFloor = null
if (!path) { if (!path) {
this.curIndex = index; this.curIndex = 0;
return; return;
} }
if (this.$route.path != path) { if (this.$route.path != path) {
this.curIndex = index; this.curIndex = 0;
this.scrollLock = false; this.scrollLock = false;
this.handleScroll(); this.handleScroll();

2
src/router/index.js
View File

@ -17,7 +17,7 @@ const blackHeaderList = [
'/franchise' '/franchise'
]; ];
const blackFooterList = [ const blackFooterList = [
'/', '/franchise' '/', '/franchise','/agent/payInfoSetting'
]; ];
// const whiteSlideList = ['/', '/ui', // const whiteSlideList = ['/', '/ui',
// '/agent/siteList', // '/agent/siteList',

188
src/views/agent/payInfoSetting.vue
View File

@ -4,7 +4,7 @@
<div class="site-setting-wrap min-flex-right"> <div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common"> <div class="siteMessage flex-common">
<h3>支付授权</h3> <h3>支付授权</h3>
<el-form v-if="payType==payTypeTaoBao"> <el-form v-if="payType == payTypeTaoBao">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left" style="max-width:100%"> <div class="flex-left" style="max-width:100%">
<div class="beforeNotice"> <div class="beforeNotice">
@ -19,27 +19,35 @@
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form v-else-if="payType==payTypeWeixin"> <el-form v-else-if="payType == payTypeWeixin">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left"> <div class="flex-left">
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> <GuipFormItem column="column" class="mb24" label="1. 公司简称">
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" prop="company_short_name" placeholder="6字以内"> <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name"
prop="company_short_name" placeholder="6字以内">
</GuipInput> </GuipInput>
</GuipFormItem> </GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）"> <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span> <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" prop="mch_id" placeholder="请输入商户号"> target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id"
prop="mch_id" placeholder="请输入商户号">
</GuipInput> </GuipInput>
</GuipFormItem> </GuipFormItem>
<GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥"> <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span> <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" prop="payinfo.apiv2" placeholder="请输入微信支付秘钥"> target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">
注意，支付密钥不能设置为纯数字</p></span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2"
prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
</GuipInput> </GuipInput>
</GuipFormItem> </GuipFormItem>
<GuipFormItem column="column" class="mb24" label="4. 公众号APPID"> <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span> <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/'
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID"> target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid"
prop="payinfo.appid" placeholder="请输入公众号APPID">
</GuipInput> </GuipInput>
</GuipFormItem> </GuipFormItem>
</div> </div>
@ -50,12 +58,8 @@
<p>预览支付二维码</p> <p>预览支付二维码</p>
</div> </div>
<div class="preview-content"> <div class="preview-content">
<!-- 有二维码的情况 --> <!-- 有二维码的情况 -->
<QrCode <QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="微信扫码支付">
v-if="qrCodeDataUrl"
:imageUrl="qrCodeDataUrl"
text="微信扫码支付"
>
<div class="flex gap8" slot="desc"> <div class="flex gap8" slot="desc">
<img style="width: 16px;" src="@/assets/register/weixin.svg" alt=""> <img style="width: 16px;" src="@/assets/register/weixin.svg" alt="">
<span class="qrcode-title ft12">微信扫码支付</span> <span class="qrcode-title ft12">微信扫码支付</span>
@ -68,20 +72,22 @@
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form v-else-if="payType==payTypeAlipay"> <el-form v-else-if="payType == payTypeAlipay">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left"> <div class="flex-left">
<div v-if="payinfo.is_pay_public==0"> <div v-if="payinfo.is_pay_public == 0">
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> <GuipFormItem column="column" class="mb24" label="1. 公司简称">
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" placeholder="6字以内"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
</GuipFormItem> </GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号"> <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
<span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span> <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入公司支付宝账号"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入公司支付宝账号"></GuipInput>
</GuipFormItem> </GuipFormItem>
</div> </div>
<div v-if="payinfo.is_pay_public==1"> <div v-if="payinfo.is_pay_public == 1">
<div class="beforeNotice"> <div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4> <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
<p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p> <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
@ -89,11 +95,14 @@
</div> </div>
<GuipFormItem column="column" class="mb24" label="1. 收款人姓名"> <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
<span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span> <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
</GuipFormItem> </GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号"> <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
<span class="desc" slot="formRight">请输入有效账号</span> <span class="desc" slot="formRight">请输入有效账号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号">
</GuipInput>
</GuipFormItem> </GuipFormItem>
</div> </div>
</div> </div>
@ -110,23 +119,25 @@
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form v-else-if="payType==payTypePdd"> <el-form v-else-if="payType == payTypePdd">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left" style="max-width:100%"> <div class="flex-left" style="max-width:100%">
<div class="beforeNotice"> <div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p> <p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex"
target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
<p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
<p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p> <p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p>
</div> </div>
<GuipFormItem column="column" class="mb24" label="账号名称"> <GuipFormItem column="column" class="mb24" label="账号名称">
<!-- <span class="desc" slot="formRight">账号名称</span> --> <!-- <span class="desc" slot="formRight">账号名称</span> -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入账号名称"></GuipInput>
</GuipFormItem> </GuipFormItem>
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form v-else-if="payType==payTypeJingdong"> <el-form v-else-if="payType == payTypeJingdong">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left" style="max-width:100%"> <div class="flex-left" style="max-width:100%">
<div class="beforeNotice"> <div class="beforeNotice">
@ -136,7 +147,8 @@
</div> </div>
<GuipFormItem column="column" class="mb24" label="账号名称"> <GuipFormItem column="column" class="mb24" label="账号名称">
<!-- <span class="desc" slot="formRight">账号名称</span> --> <!-- <span class="desc" slot="formRight">账号名称</span> -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput> <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入账号名称"></GuipInput>
</GuipFormItem> </GuipFormItem>
</div> </div>
</div> </div>
@ -146,7 +158,8 @@
<Footer></Footer> <Footer></Footer>
<div class="register-btns"> <div class="register-btns">
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton> <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText }}</GuipButton> <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText
}}</GuipButton>
</div> </div>
</div> </div>
@ -179,7 +192,7 @@ export default {
// CustomDropdown, // CustomDropdown,
GuipButton, GuipButton,
QrCode, QrCode,
Footer, Footer,
// GroupFormBtns // GroupFormBtns
}, },
@ -196,7 +209,7 @@ export default {
payTypeJingdong: PAY_TYPE_JINGDONG, payTypeJingdong: PAY_TYPE_JINGDONG,
payTypePdd: PAY_TYPE_PDD, payTypePdd: PAY_TYPE_PDD,
confirmText: '保存', confirmText: '保存',
qrCodeDataUrl:'' qrCodeDataUrl: ''
} }
}, },
computed: { computed: {
@ -210,21 +223,21 @@ export default {
store.commit('SET_PAGETITLE', '支付授权'); store.commit('SET_PAGETITLE', '支付授权');
this.getPayment(); this.getPayment();
// 模拟生成二维码 // 模拟生成二维码
QRCode.toDataURL('https://your-payment-link.com') QRCode.toDataURL('https://your-payment-link.com')
.then(url => { .then(url => {
this.qrCodeDataUrl = url this.qrCodeDataUrl = url
}) })
.catch(err => { .catch(err => {
console.error(err) console.error(err)
}) })
}, },
methods: { methods: {
getPayment() { getPayment() {
this.$http('POST', '/agentnew/ajax_get_payinfo', { this.$http('POST', '/agentnew/ajax_get_payinfo', {
payid: this.$route.query.payid, payid: this.$route.query.payid,
},{ }, {
headers:{ headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
@ -243,31 +256,31 @@ export default {
}, },
// 确认按钮事件 // 确认按钮事件
addPayment() { addPayment() {
if (this.payType == PAY_TYPE_TAOBAO) { if (this.payType == PAY_TYPE_TAOBAO) {
window.open(this.payinfo.authurl, '_blank'); window.open(this.payinfo.authurl, '_blank');
} else if (this.payType == PAY_TYPE_WEIXIN) { } else if (this.payType == PAY_TYPE_WEIXIN) {
this.$http('POST', '/agentnew/ajax_add_weixinpay', { this.$http('POST', '/agentnew/ajax_add_weixinpay', {
payid: this.$route.query.payid, payid: this.$route.query.payid,
company_short_name: this.payinfo.short_name, company_short_name: this.payinfo.short_name,
mch_id: this.payinfo.mch_id, mch_id: this.payinfo.mch_id,
apiv2: this.payinfo.apiv2, apiv2: this.payinfo.apiv2,
appid: this.payinfo.appid appid: this.payinfo.appid
}, { }, {
headers: { headers: {
'Auth': this.token 'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
} }
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
}) })
}).catch(error => {
console.error(error, 'error')
})
} else if (this.payType == PAY_TYPE_ALIPAY) { } else if (this.payType == PAY_TYPE_ALIPAY) {
this.$http('POST', '/agentnew/ajax_add_alipay', { this.$http('POST', '/agentnew/ajax_add_alipay', {
@ -330,36 +343,39 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a { a {
text-decoration: none; text-decoration: none;
color: #006AFF; color: #006AFF;
} }
.payInfo_wrap{
.payInfo_wrap {
height: calc(100% - 80px); height: calc(100% - 80px);
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.register-btns { .register-btns {
// height: 78px; // height: 78px;
/* 自动布局 */ /* 自动布局 */
// width: 344px; // width: 344px;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
background: #FFFFFF; background: #FFFFFF;
padding: 16px 0px; padding: 16px 0px;
/* 蓝色阴影_常规 */ /* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
button:nth-child(1) { button:nth-child(1) {
margin-right: 56px; margin-right: 56px;
} }
} }
.preview { .preview {
background: #FAFAFA; background: #FAFAFA;
border-radius: 4px; border-radius: 4px;
@ -374,17 +390,20 @@ a {
// padding-top: 24px; // padding-top: 24px;
// padding-left: 20px; // padding-left: 20px;
} }
.qrcode-title{
.qrcode-title {
font-size: 12px; font-size: 12px;
line-height: 13px; line-height: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #0DAF49; color: #0DAF49;
} }
.desc_title{
.desc_title {
font-size: 16px; font-size: 16px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #626573; color: #626573;
} }
.preview-title p { .preview-title p {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -476,5 +495,4 @@ a {
width: 100%; width: 100%;
flex: 1; flex: 1;
} }
</style> </style>

11
src/views/elementGroups.vue
View File

@ -297,8 +297,17 @@
<label for="">开关L</label> <label for="">开关L</label>
<!-- active-value 开启状态的值 --> <!-- active-value 开启状态的值 -->
<!-- inactive-value 关闭状态的值 --> <!-- inactive-value 关闭状态的值 -->
<GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange"> <GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div>
<div class="ele-item">
<label for="">开关L</label>
<!-- 左侧不需要添加float 属性 -->
<GuipSwitch :modelValue="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange"> <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
<GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange"> <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">

Write Preview
Loading…
Cancel
Save