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

ui页面边距

pull/46/head
zq 3 weeks ago
parent
f102de0f0a
commit
907f617e40
3 changed files with 378 additions and 373 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/style/theme/common.scss
  2. 6
      src/views/ConfigureServicePrices.vue
  3. 742
      src/views/elementGroups.vue

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

@ -34,6 +34,9 @@ body {
font-weight: normal;
letter-spacing: 0.08em;
}
.main-content12{
padding: 12px;
}
// 变小手
.point{
cursor: pointer;

6
src/views/ConfigureServicePrices.vue
View File

@ -44,7 +44,7 @@
<div class="left-pay-item ">
<div class="flex-between">
<span>微信收款</span>
<GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
@change="onSwitchChange">
</GuipSwitch>
</div>
@ -53,7 +53,7 @@
<div class="left-pay-item ">
<div class="flex-between">
<span>支付宝收款</span>
<GuipSwitch v-model="form.zhifubaoFlag" activeText="开启"
<GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启"
inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
@ -91,7 +91,7 @@
<div class="left-pay-item ">
<div class="flex-between">
<span>淘宝收款</span>
<GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
@change="onSwitchChange">
</GuipSwitch>
</div>

742
src/views/elementGroups.vue
View File

@ -1,388 +1,390 @@
<template>
<div class="elementWrap">
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item">
<label for="">单选框11：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div>
<div class="ele-item">
<label for="">下拉框：</label>
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
defaultValue="选项1" />
</div>
<div>
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<el-form>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading">
<!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<!-- <el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<div class="main-content12">
<div class="elementWrap">
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item">
<label for="">单选框11：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div>
<div class="ele-item">
<label for="">下拉框：</label>
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
defaultValue="选项1" />
</div>
<div>
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<el-form>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading">
<!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<!-- <el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope">
<div class="flex cell_render">
<GuipToolTip content="文字居中">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip>
<GuipToolTip content="图标居中">
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope">
<div class="flex cell_render">
<GuipToolTip content="文字居中">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip>
<GuipToolTip content="图标居中">
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
</template>
</el-table-column>
<el-table-column prop="unit_num" label="数量" width="180">
<template slot-scope="scope">
<GuipToolTip content="单元格局中">
</div>
</template>
</el-table-column>
<el-table-column prop="unit_num" label="数量" width="180">
<template slot-scope="scope">
<GuipToolTip content="单元格局中">
<div class="flex">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</div>
</GuipToolTip>
</template>
</el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
</template> -->
<!-- 气泡弹出框 后期样式自定义-->
<!-- <template slot-scope="scope">
<el-popover trigger="click" placement="top">
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="address" label="地址1" width="150"> </el-table-column>
<el-table-column prop="address" label="地址2" width="250"> </el-table-column>
<el-table-column prop="address" label="地址3" width="150"> </el-table-column>
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
<el-table-column prop="price2" label="价格" width="300">
<template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" />
</template>
</el-table-column>
<el-table-column label="操作(固定右)" width="200" fixed="right">
<template slot-scope="scope">
<div class="flex">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
</div>
</GuipToolTip>
</template>
</el-table-column>
</GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-form>
</div>
<div>
<h3 for="">表格(带气泡框),内容自定义：</h3>
<el-form>
<GuipTable :tableData="tableData2" :key="random()" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
:columns="columns" @confirm="onConfirm" @cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }">
<div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序"
:prop="column.label" placeholder="这是" />
</div>
</template>
</el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
</template> -->
<!-- 气泡弹出框 后期样式自定义-->
<!-- <template slot-scope="scope">
<el-popover trigger="click" placement="top">
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="address" label="地址1" width="150"> </el-table-column>
<el-table-column prop="address" label="地址2" width="250"> </el-table-column>
<el-table-column prop="address" label="地址3" width="150"> </el-table-column>
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
<el-table-column prop="price2" label="价格" width="300">
<template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" />
<template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"
:prop="column.label" placeholder="这是" unit="岁">
</GuipInput>
</template>
</el-table-column>
<el-table-column label="操作(固定右)" width="200" fixed="right">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }">
<div>
<p>自定义内容：{{ column.label }}</p>
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
<el-option label="北京市" value="北京市" />
<el-option label="上海市" value="上海市" />
<el-option label="广州市" value="广州市" />
</el-select>
</div>
</template>
</el-table-column>
</GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-form>
</div>
<div>
<h3 for="">表格(带气泡框),内容自定义：</h3>
<el-form>
<GuipTable :tableData="tableData2" :key="random()" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
:columns="columns" @confirm="onConfirm" @cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }">
<div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序"
:prop="column.label" placeholder="这是" />
</div>
</template>
<template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"
:prop="column.label" placeholder="这是" unit="岁">
</GuipInput>
</template>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }">
<div>
<p>自定义内容：{{ column.label }}</p>
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
<el-option label="北京市" value="北京市" />
<el-option label="上海市" value="上海市" />
<el-option label="广州市" value="广州市" />
</el-select>
</div>
</template>
</GuipTable>
</el-form>
</GuipTable>
</el-form>
</div>
<div class="ele-item">
<label for="">文本域：</label>
<GuipTextarea disabled :styleObject="styleObject" />
</div>
<div class="ele-item">
<label for="">输入框：</label>
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
<span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt="">
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</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 class="ele-item">
<label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<div class="ele-item">
<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="">弱按钮：</label>
<GuipButton type="ignore">按钮</GuipButton>
<GuipButton type="ignore" loading>按钮</GuipButton>
<GuipButton type="ignore" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">中按钮：</label>
<GuipButton type="system">按钮</GuipButton>
<GuipButton type="system" loading>按钮</GuipButton>
<GuipButton type="system" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">文字按钮：</label>
<GuipButton type="text" >强引导</GuipButton>
<GuipButton type="grey" >弱引导</GuipButton>
</div>
<div class="ele-item">
<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" />
</div>
<div class="ele-item">
<label for="">独特按钮单独写样式：</label>
<div class="btn1">创建首个网站</div>
</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="ele-item">
<label for="">提示：</label>
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
</div>
<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: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
prop="age" placeholder="这是自定义默认提示语" />
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<el-table
:data="tableData3"
:span-method="objectSpanMethod"
:border="true"
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
--------------------分割线0------------------------------</div>
<div style="display: flex;" class="ele-item">
<label for="">日期选择器</label>
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="ele-item">
<label for="">文本域：</label>
<GuipTextarea disabled :styleObject="styleObject" />
<div ref="ScaleBox" class="ScaleBox">
<!-- Form 组件-->
<!-- @headdenForm="headdenForm" -->
<!-- @changeSelect="changeSelect" -->
<!-- <GuipForm
:fromItem="fromItem"
:formNewList="formList"
:detail="edit"
:disabled="edit"
ref="VabForm"
/>
<div class="cardfooter" style="display: flex;">
<el-button @click="cancellation">取消</el-button>
<el-button @click="save" type="primary">保存</el-button>
</div> -->
</div>
<div class="ele-item">
<label for="">输入框：</label>
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
<span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt="">
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
<div class="flex ele-item">
<label for="">一些功能集合</label>
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</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 class="flex ele-item">
<label for="">提示信息</label>
<GuipToolTip content="这是一个提示">
<GuipButton type="primary" size="page">悬停查看提示</GuipButton>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light">
<GuipButton type="primary" size="page">自定义提示内容</GuipButton>
<template #content>
<div style="max-width: 200px">
<h4>自定义标题</h4>
<p>这里可以放任何HTML内容</p>
<el-button size="mini">甚至按钮</el-button>
</div>
</template>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
<div class="ele-item">
<label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<div class="ele-item">
<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="">弱按钮：</label>
<GuipButton type="ignore">按钮</GuipButton>
<GuipButton type="ignore" loading>按钮</GuipButton>
<GuipButton type="ignore" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">中按钮：</label>
<GuipButton type="system">按钮</GuipButton>
<GuipButton type="system" loading>按钮</GuipButton>
<GuipButton type="system" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">文字按钮：</label>
<GuipButton type="text" >强引导</GuipButton>
<GuipButton type="grey" >弱引导</GuipButton>
</div>
<div class="ele-item">
<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" />
</div>
<div class="ele-item">
<label for="">独特按钮单独写样式：</label>
<div class="btn1">创建首个网站</div>
</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="ele-item">
<label for="">提示：</label>
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
</div>
<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: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
prop="age" placeholder="这是自定义默认提示语" />
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<el-table
:data="tableData3"
:span-method="objectSpanMethod"
:border="true"
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
--------------------分割线0------------------------------</div>
<div style="display: flex;" class="ele-item">
<label for="">日期选择器</label>
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
</div>
<div ref="ScaleBox" class="ScaleBox">
<!-- Form 组件-->
<!-- @headdenForm="headdenForm" -->
<!-- @changeSelect="changeSelect" -->
<!-- <GuipForm
:fromItem="fromItem"
:formNewList="formList"
:detail="edit"
:disabled="edit"
ref="VabForm"
/>
<div class="cardfooter" style="display: flex;">
<el-button @click="cancellation">取消</el-button>
<el-button @click="save" type="primary">保存</el-button>
</div> -->
</div>
<div class="flex ele-item">
<label for="">一些功能集合</label>
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</div>
<div class="flex ele-item">
<label for="">提示信息</label>
<GuipToolTip content="这是一个提示">
<GuipButton type="primary" size="page">悬停查看提示</GuipButton>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light">
<GuipButton type="primary" size="page">自定义提示内容</GuipButton>
<template #content>
<div style="max-width: 200px">
<h4>自定义标题</h4>
<p>这里可以放任何HTML内容</p>
<el-button size="mini">甚至按钮</el-button>
</div>
</template>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
</div>
</template>

Write Preview
Loading…
Cancel
Save