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

示例页面增加侧边栏、整合同类型内容

styleCommon-1218
zq 3 days ago
parent
8eee9def72
commit
c0d3567a80
3 changed files with 529 additions and 363 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. 116
      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: [{

116
src/views/elementGroups.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<div class="main-content12"> <div class="main-content12">
<div class="elementWrap"> <div class="elementWrap">
<div id="example1" class="mb24 ele-item gap10">
<label for="">输入+下拉 组合框</label>
<domainBind label="域名设置" @handleEvent="handleEvent" /> <domainBind label="域名设置" @handleEvent="handleEvent" />
<PromptText text='这是一个提示框' :type="1" /> </div>
<PromptText text='这是一个提示框' :type="2" /> <div id="example2" class="ele-item">
<PromptText text='这是一个提示框' :type="3" /> <label style="font-weight: 600;text-align: left;" for="">文案提示框</label>
<div class="column gap10">
<PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
<PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
<PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
<PromptText text="前期准备事项" :type="1" class="beforeNotice"> <PromptText text="前期准备事项" :type="1" class="beforeNotice">
<template #next_desc> <template #next_desc>
<p class="flex"> <p class="flex">
@ -26,8 +32,10 @@
</p> </p>
</template> </template>
</PromptText> </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,6 +73,7 @@
<!-- 以 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 id="example6">
<div class="ele-item"> <div class="ele-item">
<label for="">copy固定内容</label> <label for="">copy固定内容</label>
<!-- 复制固定文本 --> <!-- 复制固定文本 -->
@ -73,6 +82,8 @@
<!-- 复制动态文本 --> <!-- 复制动态文本 -->
<GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton> <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
</div> </div>
</div>
<div id="example7">
<div class="ele-item"> <div class="ele-item">
<label for="">手动点击copy</label> <label for="">手动点击copy</label>
<GuipInput v-model="form.input1"> <GuipInput v-model="form.input1">
@ -82,6 +93,8 @@
</GuipToolTip> </GuipToolTip>
</GuipInput> </GuipInput>
</div> </div>
</div>
<div id="example8">
<div class="ele-item"> <div class="ele-item">
<label for="">单选框(对象格式)：</label> <label for="">单选框(对象格式)：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language" <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@ -93,7 +106,10 @@
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
value-key="id" /> value-key="id" />
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example9">
<div class="ele-item"> <div class="ele-item">
<label for="">数组套对象类型下拉框：</label> <label for="">数组套对象类型下拉框：</label>
<!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey--> <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
@ -115,9 +131,11 @@
<GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest" <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
prop="card" :options="languageOptions"/> 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,7 +211,6 @@
: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>
@ -225,7 +242,9 @@
</template> </template>
</GuipTable> --> </GuipTable> -->
</div> </div>
</div>
<div id="example11">
<div class="ele-item"> <div class="ele-item">
<label for="">文本域：固定行数</label> <label for="">文本域：固定行数</label>
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" /> <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
@ -239,8 +258,11 @@
<GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px" <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit /> placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</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,8 +307,9 @@
@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>
<div id="example13">
<div class="ele-item"> <div class="ele-item">
<label for="">单选框：</label> <label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio> <el-radio v-model="radio1" :label="1">选项一</el-radio>
@ -301,7 +324,11 @@
<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>
</div>
<div id="example14">
<div class="ele-item" >
<label for="">按钮尺寸：</label> <label for="">按钮尺寸：</label>
<GuipButton size="superBig">加盟并进入后台</GuipButton> <GuipButton size="superBig">加盟并进入后台</GuipButton>
<GuipButton size="big">准备完毕，验证自有域名</GuipButton> <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
@ -357,6 +384,11 @@
<label for="">独特按钮单独写样式：</label> <label for="">独特按钮单独写样式：</label>
<div class="btn1">创建首个网站</div> <div class="btn1">创建首个网站</div>
</div> </div>
<div class="ele-item">
<label for="">常用按钮组合</label>
<GroupFormBtns cancelText="取消吧" confirmText="确定啦"/>
</div>
<!-- 暂时废弃 --> <!-- 暂时废弃 -->
<!-- <div class="ele-item"> <!-- <div class="ele-item">
<label for="">常规按钮：</label> <label for="">常规按钮：</label>
@ -392,14 +424,18 @@
<label for="">自定义宽高按钮：</label> <label for="">自定义宽高按钮：</label>
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton> <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</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;"> <div style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3> <h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 --> <!-- 表单左右布局 -->
@ -429,7 +465,9 @@
prop="card" :options="['麻辣烫','提拉米苏']" /> prop="card" :options="['麻辣烫','提拉米苏']" />
</GuipFormItem> </GuipFormItem>
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example17">
<div class="ele-item"> <div class="ele-item">
<label for="">开关L</label> <label for="">开关L</label>
<!-- active-value 开启状态的值 --> <!-- active-value 开启状态的值 -->
@ -455,6 +493,11 @@
</GuipSwitch> </GuipSwitch>
<p>当前值switchValue2：{{ this.form.switchValue2 }}</p> <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
</div> </div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example18">
<div class="flex ele-item"> <div class="flex ele-item">
<label for="">input、drop组合使用(默认使用)</label> <label for="">input、drop组合使用(默认使用)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true"> <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
@ -552,13 +595,12 @@
</template> </template>
</CustomDropdown> </CustomDropdown>
</div> </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="结束日期">
@ -581,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>
@ -625,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">
@ -679,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 {
@ -699,7 +752,8 @@ export default {
SvgIcon, SvgIcon,
GuipFormItem, GuipFormItem,
DevicePreview, DevicePreview,
CustomDropdown CustomDropdown,
GroupFormBtns
}, },
data() { data() {
return { return {
@ -1249,8 +1303,6 @@ export default {
position: pos // 或 'bottom' position: pos // 或 'bottom'
}) // 3秒后自动隐藏（可选） }) // 3秒后自动隐藏（可选）
console.log(this.tooltip,'tooltip',el,pos); console.log(this.tooltip,'tooltip',el,pos);
}, },
openDialog4(el){ openDialog4(el){
@ -1399,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