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

Merge pull request 'styleCommon-1218' (#138) from styleCommon-1218 into master 

Reviewed-on: #138
master
zhangqi 2 days ago
parent
2cc55a60a1 c0d3567a80
commit
d42a64b00b
4 changed files with 539 additions and 362 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. 5
      src/router/index.js
  2. 101
      src/store/index.js
  3. 10
      src/style/theme/common.scss
  4. 785
      src/views/elementGroups.vue

5
src/router/index.js
View File

@ -642,6 +642,11 @@ router.beforeEach((to, from, next) => {
store.commit('SET_SLIDER_MENU', 'rankMenuData'); store.commit('SET_SLIDER_MENU', 'rankMenuData');
} }
if (to.path == '/ui') { //匹配包含此路径的 侧边栏数据
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'uiSliderData');
}
if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据 if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据
store.commit('SET_SIDEBAR', false); store.commit('SET_SIDEBAR', false);
} }

101
src/store/index.js
View File

@ -24,6 +24,107 @@ export default new Vuex.Store({
carryParam: true, //携带参数 carryParam: true, //携带参数
componentsName: '', componentsName: '',
currentMenuItem: null, currentMenuItem: null,
uiSliderData: [
{
name: 'UI组件库示例',
path: '/ui',
img: 'site/pay_trade.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [{
name: '输入&下拉组合',
desc: 'example1',
},
{
name: '提示框',
desc: 'example2',
},
{
name: '实时预览外层',
desc: 'example3',
},
{
name: '状态标签',
desc: 'example4',
},
{
name: '卡片&选中样式',
desc: 'example5',
},
{
name: 'copy固定内容',
desc: 'example6',
},
{
name: '手动copy',
desc: 'example7',
},
{
name: '单选框{}+[]',
desc: 'example8',
},
{
name: '下拉框{}+[]',
desc: 'example9',
},
{
name: '表格',
desc: 'example10'
},
{
name: '文本域相关',
desc: 'example11'
},
{
name: '输入框相关',
desc: 'example12'
},
{
name: '间隔表单',
desc: 'example13'
},
{
name: '按钮',
desc: 'example14'
},
{
name: '提示(自消版)',
desc: 'example15'
},
{
name: '表单常见布局',
desc: 'example16'
},
{
name: '开关集合',
desc: 'example17'
},
{
name: 'input+drop',
desc: 'example18'
},
{
name: '自定义消息位置',
desc: 'example19'
},
{
name: '弹出框',
desc: 'example20'
},
{
name: '加载动画',
desc: 'example21'
},
{
name: 'tooltip提示',
desc: 'example22'
},
{
name: '说明文档',
desc: 'example50'
}
]
}
],//整理的组件或者样式页面
slidermenu: [], slidermenu: [],
// 第二种侧边栏--单项可跳转 // 第二种侧边栏--单项可跳转
rankMenuData: [{ rankMenuData: [{

10
src/style/theme/common.scss
View File

@ -101,6 +101,16 @@ body {
gap: 12px; gap: 12px;
} }
.gap20{
display: flex;
gap: 20px;
}
.gap24{
display: flex;
gap: 24px;
}
.mt16 { .mt16 {
margin-top: 16px; margin-top: 16px;
} }

785
src/views/elementGroups.vue
View File

@ -1,33 +1,41 @@
<template> <template>
<div class="main-content12"> <div class="main-content12">
<div class="elementWrap"> <div class="elementWrap">
<domainBind label="域名设置" @handleEvent="handleEvent" /> <div id="example1" class="mb24 ele-item gap10">
<PromptText text='这是一个提示框' :type="1" /> <label for="">输入+下拉 组合框</label>
<PromptText text='这是一个提示框' :type="2" /> <domainBind label="域名设置" @handleEvent="handleEvent" />
<PromptText text='这是一个提示框' :type="3" /> </div>
<PromptText text="前期准备事项" :type="1" class="beforeNotice"> <div id="example2" class="ele-item">
<template #next_desc> <label style="font-weight: 600;text-align: left;" for="">文案提示框</label>
<p class="flex"> <div class="column gap10">
<a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex" <PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
target="_blank"> <PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
<img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台 <PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
</p> <PromptText text="前期准备事项" :type="1" class="beforeNotice">
</template> <template #next_desc>
<template #desc> <p class="flex">
<p class="mt12 flex"> <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex" target="_blank">
target="_blank"> <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
<img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台 </p>
</p> </template>
<p class="mt10 flex"> <template #desc>
2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank"> <p class="mt12 flex">
<img src="@/assets/site/form_linkActive.svg" 1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。 target="_blank">
</p> <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
</template> </p>
</PromptText> <p class="mt10 flex">
2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
</p>
</template>
</PromptText>
</div>
</div>
<div class="ele-item"> <div class="ele-item" id="example3">
<label for="">实时预览外层嵌套</label> <label for="">实时预览外层嵌套</label>
<!-- 默认 显示电脑端、手机端 --> <!-- 默认 显示电脑端、手机端 -->
<!-- :showMobile="false" :showPc="false" --> <!-- :showMobile="false" :showPc="false" -->
@ -41,7 +49,7 @@
</template> </template>
</DevicePreview> </DevicePreview>
</div> </div>
<div class="ele-item gap12"> <div class="ele-item gap12" id="example4">
<label for="">不同状态：</label> <label for="">不同状态：</label>
<div class="status-item divgreen"><span class="fontgreen">状态标签</span></div> <div class="status-item divgreen"><span class="fontgreen">状态标签</span></div>
<div class="status-item divorange"><span class="fontorange">状态标签</span></div> <div class="status-item divorange"><span class="fontorange">状态标签</span></div>
@ -49,7 +57,7 @@
<div class="status-item divred"><span class="fontred">状态标签</span></div> <div class="status-item divred"><span class="fontred">状态标签</span></div>
<div class="status-item divblue"><span class="fontblue">状态标签</span></div> <div class="status-item divblue"><span class="fontblue">状态标签</span></div>
</div> </div>
<div class="ele-item gap12"> <div class="ele-item gap12" id="example5">
<label for="">卡片默认及选中样式</label> <label for="">卡片默认及选中样式</label>
<div class="wallet-item point " > <div class="wallet-item point " >
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false"> <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false">
@ -65,59 +73,69 @@
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 --> <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef"> <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item"> <div id="example6">
<label for="">copy固定内容</label> <div class="ele-item">
<!-- 复制固定文本 --> <label for="">copy固定内容</label>
<GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton> <!-- 复制固定文本 -->
<GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
<!-- 复制动态文本 -->
<GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton> <!-- 复制动态文本 -->
</div> <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
<div class="ele-item"> </div>
<label for="">手动点击copy</label>
<GuipInput v-model="form.input1">
<!-- 提示可以不添加 、图标可更换 -->
<GuipToolTip content="点击复制到粘贴板" slot="suffix">
<img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
</GuipToolTip>
</GuipInput>
</div>
<div class="ele-item">
<label for="">单选框(对象格式)：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div> </div>
<div class="ele-item"> <div id="example7">
<label for="">单选框2（数组格式 + 自定义取值）：</label> <div class="ele-item">
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel" <label for="">手动点击copy</label>
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" <GuipInput v-model="form.input1">
value-key="id" /> <!-- 提示可以不添加 、图标可更换 -->
<GuipToolTip content="点击复制到粘贴板" slot="suffix">
<img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
</GuipToolTip>
</GuipInput>
</div>
</div> </div>
<div id="example8">
<div class="ele-item">
<label for="">单选框(对象格式)：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div>
<div class="ele-item">
<label for="">单选框2（数组格式 + 自定义取值）：</label>
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
value-key="id" />
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
<div class="ele-item">
<label for="">数组套对象类型下拉框：</label>
<!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
<div class="flex">
<GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
<p>j卢卡斯就到啦</p>
<GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
@blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
</div>
</div> </div>
<div class="ele-item"> <div id="example9">
<label for="">纯数组[1,2]下拉框：</label> <div class="ele-item">
<GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest" <label for="">数组套对象类型下拉框：</label>
prop="card" :options="['麻辣烫','提拉米苏']" /> <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
</div> <div class="flex">
<div class="ele-item"> <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
<label for="">对象格式下拉框：</label> prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
<GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest" <p>j卢卡斯就到啦</p>
prop="card" :options="languageOptions"/> <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
@blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
</div>
</div>
<div class="ele-item">
<label for="">纯数组[1,2]下拉框：</label>
<GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest"
prop="card" :options="['麻辣烫','提拉米苏']" />
</div>
<div class="ele-item">
<label for="">对象格式下拉框：</label>
<GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
prop="card" :options="languageOptions"/>
</div>
</div> </div>
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
<div> <div id="example10">
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3> <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton> <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange" <GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange"
@ -193,54 +211,58 @@
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="total"> :total="total">
</el-pagination> </el-pagination>
</div> <div class="flex">
<div class="flex"> <h3 for="">表格(带气泡框),内容自定义：</h3>
<h3 for="">表格(带气泡框),内容自定义：</h3> <a href="/register">点击一下跳转参照页面</a>
<a href="/register">点击一下跳转参照页面</a> <!-- 暂时废弃此版本 -->
<!-- 暂时废弃此版本 --> <!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable"
<!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable" @selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px" :columns="columns" @confirm="onConfirm" @cancel="onCancel">
:columns="columns" @confirm="onConfirm" @cancel="onCancel"> <template #popover-content-name="{ row, column }">
<template #popover-content-name="{ row, column }"> <div>
<div> <GuipInput ref="GuipInput" width="252px" type="text"
<GuipInput ref="GuipInput" width="252px" type="text" v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label" placeholder="这是" />
placeholder="这是" /> </div>
</div> </template>
</template> <template #popover-content-age="{ row, column }">
<template #popover-content-age="{ row, column }"> <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text" label="年龄" :prop="column.label" placeholder="这是" unit="岁">
label="年龄" :prop="column.label" placeholder="这是" unit="岁"> </GuipInput>
</GuipInput> </template>
</template> <template #popover-content-address="{ row, column }">
<template #popover-content-address="{ row, column }"> <div>
<div> <p>自定义内容：{{ column.label }}</p>
<p>自定义内容：{{ column.label }}</p> <el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择"> <el-option label="北京市" value="北京市" />
<el-option label="北京市" value="北京市" /> <el-option label="上海市" value="上海市" />
<el-option label="上海市" value="上海市" /> <el-option label="广州市" value="广州市" />
<el-option label="广州市" value="广州市" /> </el-select>
</el-select> </div>
</div> </template>
</template> </GuipTable> -->
</GuipTable> --> </div>
</div> </div>
<div class="ele-item"> <div id="example11">
<label for="">文本域：固定行数</label> <div class="ele-item">
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" /> <label for="">文本域：固定行数</label>
</div> <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
<div class="ele-item"> </div>
<label for="">文本域：自适应高度</label> <div class="ele-item">
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize /> <label for="">文本域：自适应高度</label>
</div> <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
<div class="ele-item"> </div>
<label for="">文本域：自定义label、描述</label> <div class="ele-item">
<GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px" <label for="">文本域：自定义label、描述</label>
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit /> <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div> </div>
<div class="ele-item">
<div class="ele-item" id="example12">
<label for="">输入框：</label> <label for="">输入框：</label>
<GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px" <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
placeholder="这是自定义默认提示语" /> placeholder="这是自定义默认提示语" />
@ -267,7 +289,7 @@
</GuipInput> </GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> --> <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</div> </div>
<div class="ele-item gap12"> <div class="ele-item gap12" id="example13">
<label for="">带间隔的label:</label> <label for="">带间隔的label:</label>
<div class="column"> <div class="column">
<div class="flex mb12"> <div class="flex mb12">
@ -285,219 +307,274 @@
@change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true" @change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true"
value-key="id" /> value-key="id" />
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div class="ele-item">
<label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio>
<el-radio v-model="radio1" :label="2">选项二</el-radio>
</div> </div>
<div id="example13">
<div class="ele-item">
<label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio>
<el-radio v-model="radio1" :label="2">选项二</el-radio>
</div>
<div class="ele-item"> <div class="ele-item">
<label for="">单选框组：</label> <label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange"> <el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio> <el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio> <el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio> <el-radio :label="9">备选项</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="ele-item"> <div class="shortLine">--------------------分割线------------------------------</div>
<label for="">按钮尺寸：</label>
<GuipButton size="superBig">加盟并进入后台</GuipButton>
<GuipButton size="big">准备完毕，验证自有域名</GuipButton>
<GuipButton size="page">下一步</GuipButton>
<GuipButton size="primary">保存</GuipButton>
<GuipButton size="table">新增站点</GuipButton>
<GuipButton size="form">前往添加</GuipButton>
</div>
<div class="ele-item">
<label for="">强按钮：</label>
<!-- 默认 type= primary normal 样式 -->
<GuipButton>默认</GuipButton>
<GuipButton loading>按钮</GuipButton>
<GuipButton disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">ignore：</label>
<GuipButton type="ignore">按钮</GuipButton>
<GuipButton type="ignore" loading>按钮</GuipButton>
<GuipButton type="ignore" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">system：</label>
<GuipButton type="system">按钮</GuipButton>
<GuipButton type="system" loading>按钮</GuipButton>
<GuipButton type="system" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">often：</label>
<GuipButton type="often">按钮</GuipButton>
<GuipButton type="often" loading>按钮</GuipButton>
<GuipButton type="often" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">文字按钮：</label>
<GuipButton type="text">强引导</GuipButton>
<GuipButton type="grey">弱引导</GuipButton>
</div>
<div class="ele-item gap12">
<label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
<hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF" @click="btnClick" />
<!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
<hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
hover-text-color="#006AFF" width="110px" height="32px"
:customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
</div> </div>
<div class="ele-item"> <div id="example14">
<label for="">独特按钮单独写样式：</label> <div class="ele-item" >
<div class="btn1">创建首个网站</div> <label for="">按钮尺寸：</label>
</div> <GuipButton size="superBig">加盟并进入后台</GuipButton>
<!-- 暂时废弃 --> <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
<!-- <div class="ele-item"> <GuipButton size="page">下一步</GuipButton>
<label for="">常规按钮：</label> <GuipButton size="primary">保存</GuipButton>
<GuipButton>默认按钮</GuipButton> <GuipButton size="table">新增站点</GuipButton>
<GuipButton type="mild" size="medium">轻度按钮</GuipButton> <GuipButton size="form">前往添加</GuipButton>
<GuipButton type="primary">按钮</GuipButton> </div>
<GuipButton type="reverseMild">按钮</GuipButton> <div class="ele-item">
<GuipButton type="primary" loading>按钮</GuipButton> <label for="">强按钮：</label>
<GuipButton type="success" :plain="plain">按钮</GuipButton> <!-- 默认 type= primary normal 样式 -->
<GuipButton type="info" :plain="plain">按钮</GuipButton> <GuipButton>默认</GuipButton>
<GuipButton type="warning" :plain="plain">按钮</GuipButton> <GuipButton loading>按钮</GuipButton>
<GuipButton type="danger" :plain="plain">按钮</GuipButton> <GuipButton disabled>按钮</GuipButton>
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">禁用按钮：</label> <label for="">ignore：</label>
<GuipButton disabled>默认按钮</GuipButton> <GuipButton type="ignore">按钮</GuipButton>
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton> <GuipButton type="ignore" loading>按钮</GuipButton>
<GuipButton type="reverseMild" disabled>按钮</GuipButton> <GuipButton type="ignore" disabled>按钮</GuipButton>
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton> </div>
<GuipButton type="success" disabled>按钮</GuipButton> <div class="ele-item">
<GuipButton type="info" disabled>按钮</GuipButton> <label for="">system：</label>
<GuipButton type="warning" disabled>按钮</GuipButton> <GuipButton type="system">按钮</GuipButton>
<GuipButton type="danger" disabled>按钮</GuipButton> <GuipButton type="system" loading>按钮</GuipButton>
</div> <GuipButton type="system" disabled>按钮</GuipButton>
<div class="ele-item"> </div>
<label for="">三种尺寸按钮：</label> <div class="ele-item">
<GuipButton type="primary">默认按钮</GuipButton> <label for="">often：</label>
<GuipButton type="primary" size="medium">中等按钮</GuipButton> <GuipButton type="often">按钮</GuipButton>
<GuipButton type="primary" size="small">小的按钮</GuipButton> <GuipButton type="often" loading>按钮</GuipButton>
<GuipButton type="primary" size="mini">迷你按钮</GuipButton> <GuipButton type="often" disabled>按钮</GuipButton>
</div> --> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">自定义宽高按钮：</label> <label for="">文字按钮：</label>
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton> <GuipButton type="text">强引导</GuipButton>
<GuipButton type="grey">弱引导</GuipButton>
<GuipButton type="warn">警示</GuipButton>
</div>
<div class="ele-item gap12">
<label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
<hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF" @click="btnClick" />
<!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
<hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
hover-text-color="#006AFF" width="110px" height="32px"
:customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
</div>
<div class="ele-item">
<label for="">独特按钮单独写样式：</label>
<div class="btn1">创建首个网站</div>
</div>
<div class="ele-item">
<label for="">常用按钮组合</label>
<GroupFormBtns cancelText="取消吧" confirmText="确定啦"/>
</div>
<!-- 暂时废弃 -->
<!-- <div class="ele-item">
<label for="">常规按钮：</label>
<GuipButton>默认按钮</GuipButton>
<GuipButton type="mild" size="medium">轻度按钮</GuipButton>
<GuipButton type="primary">按钮</GuipButton>
<GuipButton type="reverseMild">按钮</GuipButton>
<GuipButton type="primary" loading>按钮</GuipButton>
<GuipButton type="success" :plain="plain">按钮</GuipButton>
<GuipButton type="info" :plain="plain">按钮</GuipButton>
<GuipButton type="warning" :plain="plain">按钮</GuipButton>
<GuipButton type="danger" :plain="plain">按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">禁用按钮：</label>
<GuipButton disabled>默认按钮</GuipButton>
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
<GuipButton type="reverseMild" disabled>按钮</GuipButton>
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
<GuipButton type="success" disabled>按钮</GuipButton>
<GuipButton type="info" disabled>按钮</GuipButton>
<GuipButton type="warning" disabled>按钮</GuipButton>
<GuipButton type="danger" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">三种尺寸按钮：</label>
<GuipButton type="primary">默认按钮</GuipButton>
<GuipButton type="primary" size="medium">中等按钮</GuipButton>
<GuipButton type="primary" size="small">小的按钮</GuipButton>
<GuipButton type="primary" size="mini">迷你按钮</GuipButton>
</div> -->
<div class="ele-item">
<label for="">自定义宽高按钮：</label>
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div> </div>
<div class="ele-item">
<div class="ele-item" id="example15">
<label for="">提示：</label> <label for="">提示：</label>
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton> <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton> <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton> <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
<div class="shortLine">--------------------分割线------------------------------</div>
</div> </div>
<div id="example15">
<div style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 -->
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
:rules="usernameRules" placeholder="这是自定义默认提11示语" />
</div>
<div style="width: 600px;"> <div style="width: 800px;height: 150px;">
<h3>表单左右布局（直接使用封装好的input）</h3> <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<!-- 表单左右布局 --> <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username" v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
:rules="usernameRules" placeholder="这是自定义默认提11示语" /> </div>
</div> <div style="width: 400px;height: 150px;">
<h3>自定义 表单内容 </h3>
<div style="width: 800px;height: 150px;"> <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3> <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
<GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案" <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
v-model="form.age" prop="age" placeholder="这是自定义默认提示语" /> 添加必输校验 直接使用 required 属性
特殊的使用slot = formLeft 自定义内容；
添加独立类名，修改样式 -->
<!-- <b slot="formLeft">自定义左侧</b> -->
<span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
<!-- 自定义下方内容 -->
<!-- <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
placeholder="请输入" /> -->
<GuipSelect slot="formDom" v-model="form.card" clearable @change="selectChangeTest"
prop="card" :options="['麻辣烫','提拉米苏']" />
</GuipFormItem>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div> </div>
<div style="width: 400px;height: 150px;"> <div id="example17">
<h3>自定义 表单内容 </h3> <div class="ele-item">
<!-- 可以添加独立类名 默认宽度继承父元素 100% --> <label for="">开关L</label>
<GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true"> <!-- active-value 开启状态的值 -->
<!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性； <!-- inactive-value 关闭状态的值 -->
添加必输校验 直接使用 required 属性 <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
特殊的使用slot = formLeft 自定义内容； @change="onSwitchChange">
添加独立类名，修改样式 --> </GuipSwitch>
<!-- <b slot="formLeft">自定义左侧</b> --> </div>
<span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span> <div class="ele-item">
<!-- 自定义下方内容 --> <label for="">开关L</label>
<!-- <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age" <!-- 左侧不需要添加float 属性 -->
placeholder="请输入" /> --> <GuipSwitch v-model="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭"
<GuipSelect slot="formDom" v-model="form.card" clearable @change="selectChangeTest" @change="onSwitchChange">
prop="card" :options="['麻辣烫','提拉米苏']" /> </GuipSwitch>
</GuipFormItem> </div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
@change="onSwitchChange">
</GuipSwitch>
<GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string"
@change="onSwitchChange">
</GuipSwitch>
<p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div> </div>
<div id="example18">
<div class="ele-item">
<label for="">开关L</label> <div class="flex ele-item">
<!-- active-value 开启状态的值 --> <label for="">input、drop组合使用(默认使用)</label>
<!-- inactive-value 关闭状态的值 --> <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false" <div slot="formDom" class="self-drop-wrap flex">
@change="onSwitchChange"> <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipSwitch> </GuipInput>
</div> <!-- 只用作选中内容展示 -->
<div class="ele-item"> <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
<label for="">开关L</label> {{ currentDomainItem.name }}</div>
<!-- 左侧不需要添加float 属性 --> </div>
<GuipSwitch v-model="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭" <!--触发 真实下拉操作 -->
@change="onSwitchChange"> <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
</GuipSwitch> <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
</div> :options="domainOptions" @change="changeSelectIp" placeholder="请选择">
<div class="ele-item"> <template #normal>
<label for="">开关L</label> <div class="flex flex-between noraml-jump">
<GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number" <div class="left">
@change="onSwitchChange"> <b>添加新域名</b>
</GuipSwitch> <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string" <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
@change="onSwitchChange"> </div>
</GuipSwitch> <div class="right">
<p>当前值switchValue2：{{ this.form.switchValue2 }}</p> <GuipButton size="form">前往绑定</GuipButton>
</div> </div>
<div class="flex ele-item">
<label for="">input、drop组合使用(默认使用)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex">
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipInput>
<!-- 只用作选中内容展示 -->
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
{{ currentDomainItem.name }}</div>
</div>
<!--触发 真实下拉操作 -->
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
:options="domainOptions" @change="changeSelectIp" placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div> </div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex ele-item">
<label for="">input、drop组合使用(自定义下拉选择项)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex">
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipInput>
<!-- 只用作选中内容展示 -->
<div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
{{ currentDomainItem.name }}
</div> </div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex ele-item">
<label for="">input、drop组合使用(自定义下拉选择项)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex">
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipInput>
<!-- 只用作选中内容展示 -->
<div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
{{ currentDomainItem.name }}
</div> </div>
</div> <!--触发 真实下拉操作 -->
<!--触发 真实下拉操作 --> <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label--> <CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
<CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix" :options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
:options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择"> <template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 选中条件-->
<!-- 不添加这个 默认普通选中格式 单独取值 display-key
自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
</div>
<div class="right">
<img v-if="form.domainSuffix == item.id"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex ele-item">
<label for="">单独实现自定义内容下拉选择</label>
<CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
@change="changeSelectIp" valueKey="id" placeholder="请选择">
<template #normal> <template #normal>
<div class="flex flex-between noraml-jump"> <div class="flex flex-between noraml-jump">
<div class="left"> <div class="left">
@ -510,54 +587,20 @@
</div> </div>
</div> </div>
</template> </template>
<!-- 自定义下拉选项 选中条件-->
<!-- 不添加这个 默认普通选中格式 单独取值 display-key
自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
<template #item="{ item }"> <template #item="{ item }">
<div class="flex-between"> <div class="flex-between">
<div class="left"> <p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
<p class="one">{{ item.label }}</p> <p>易烊千玺/田栩宁</p>
</div>
<div class="right">
<img v-if="form.domainSuffix == item.id"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div> </div>
</template> </template>
</CustomDropdown> </CustomDropdown>
</GuipFormItem> </div>
</div>
<div class="flex ele-item">
<label for="">单独实现自定义内容下拉选择</label>
<CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
@change="changeSelectIp" valueKey="id" placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<template #item="{ item }">
<div class="flex-between">
<p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
<p>易烊千玺/田栩宁</p>
</div>
</template>
</CustomDropdown>
</div> </div>
</el-form> </el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;"> <div class="shortLine">--------------------分割线------------------------------</div>
--------------------分割线0------------------------------</div>
<div style="display: flex;" class="ele-item"> <div style="" class="ele-item">
<label for="">日期选择器</label> <label for="">日期选择器</label>
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期" <el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期">
@ -580,29 +623,35 @@
<el-button @click="save" type="primary">保存</el-button> <el-button @click="save" type="primary">保存</el-button>
</div> --> </div> -->
</div> </div>
<div class="flex ele-item gap10" style="flex-wrap: wrap;"> <div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example19">
<label for="">一些功能集合</label> <label for="">指定位置提示</label>
<GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示 <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示
</GuipButton> </GuipButton>
<GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示 <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示
</GuipButton> </GuipButton>
<GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示 <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示
</GuipButton> </GuipButton>
<GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示 <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
</GuipButton> </GuipButton>
<GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
</GuipButton>
</div>
<div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example20">
<label for="">弹出框内布局集合</label>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右） <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
</GuipButton> </GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中） <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
</GuipButton> </GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义 <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
</GuipButton> </GuipButton>
</div>
<div id="example21" class="flex ele-item gap10">
<label for="">展示加载</label>
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton> <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</div> </div>
<div class="flex ele-item"> <div class="flex ele-item" id="example22">
<label for="">提示信息</label> <label for="">提示信息</label>
<GuipToolTip content="这是一个提示"> <GuipToolTip content="这是一个提示">
<GuipButton type="primary" size="page">悬停查看提示</GuipButton> <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
@ -624,6 +673,10 @@
</GuipToolTip> </GuipToolTip>
</div> </div>
<div class="flex ele-item" id="example50">
<a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
</div>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false" <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange"> @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
@ -678,6 +731,7 @@ import SvgIcon from '@/components/SvgIcon.vue';
import PromptText from "@/components/PromptText.vue"; import PromptText from "@/components/PromptText.vue";
import DevicePreview from "@/components/PreviewTab.vue"; import DevicePreview from "@/components/PreviewTab.vue";
import domainBind from "@/components/domainBind.vue"; import domainBind from "@/components/domainBind.vue";
import GroupFormBtns from '@/components/GroupFormBtns.vue';
export default { export default {
@ -698,7 +752,8 @@ export default {
SvgIcon, SvgIcon,
GuipFormItem, GuipFormItem,
DevicePreview, DevicePreview,
CustomDropdown CustomDropdown,
GroupFormBtns
}, },
data() { data() {
return { return {
@ -1247,8 +1302,6 @@ export default {
target: this.$refs[el], // 可以是DOM元素或选择器 target: this.$refs[el], // 可以是DOM元素或选择器
position: pos // 或 'bottom' position: pos // 或 'bottom'
}) // 3秒后自动隐藏（可选） }) // 3秒后自动隐藏（可选）
console.log(this.tooltip,'tooltip',el,pos); console.log(this.tooltip,'tooltip',el,pos);
}, },
@ -1398,6 +1451,14 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shortLine{
width: 100%;
margin: 20px 0;
height: 18px;
font-size: 12px;
text-align: center;
background-color: antiquewhite;
}
.elementWrap { .elementWrap {
/* width: 100%; */ /* width: 100%; */
padding: 30px 40px; padding: 30px 40px;

Write Preview
Loading…
Cancel
Save