|
|
|
@ -1,38 +1,28 @@ |
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
<GuipTable :tableData="tableData2" ref="multipleTable" @selectChange="handleSelectionChange" |
|
|
|
:multiple="true" autoColumn="true" :loading="tableLoading" :border="true"> |
|
|
|
<!-- <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"> |
|
|
|
@ -40,11 +30,11 @@ |
|
|
|
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ |
|
|
|
scope.row.payment |
|
|
|
== |
|
|
|
'0' ? '文字居中' : '文字居中' }}</span> |
|
|
|
'0' ? '文字居中' : '文字居中' }}</span> |
|
|
|
</GuipToolTip> |
|
|
|
<GuipToolTip content="图标居中"> |
|
|
|
<svg-icon size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" |
|
|
|
:hoverColor="'#006AFF'" /> |
|
|
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" |
|
|
|
:color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|
|
|
</GuipToolTip> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -57,35 +47,26 @@ |
|
|
|
<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'" /> |
|
|
|
'0' ? '单元格局中' : '单元格局中' }}</span> |
|
|
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" |
|
|
|
:color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
</GuipToolTip> |
|
|
|
</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> --> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}元</span> |
|
|
|
</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="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"> |
|
|
|
<el-table-column prop="price" label="价格" width="300"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card" |
|
|
|
prop="card" :options="options" defaultValue="选项1" /> |
|
|
|
@ -104,28 +85,26 @@ |
|
|
|
: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" |
|
|
|
</div> |
|
|
|
<div class="flex"> |
|
|
|
<h3 for="">表格(带气泡框),内容自定义：</h3> |
|
|
|
<a href="/register">点击一下跳转参照页面</a> |
|
|
|
<!-- 暂时废弃此版本 --> |
|
|
|
<!-- <GuipTable :tableData="tableData4" :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="这是" /> |
|
|
|
<GuipInput ref="GuipInput" width="252px" type="text" |
|
|
|
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 ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text" |
|
|
|
label="年龄" :prop="column.label" placeholder="这是" unit="岁"> |
|
|
|
</GuipInput> |
|
|
|
</template> |
|
|
|
<!-- 自定义地址列的气泡框内容 --> |
|
|
|
<template #popover-content-address="{ row, column }"> |
|
|
|
<div> |
|
|
|
<p>自定义内容：{{ column.label }}</p> |
|
|
|
@ -136,226 +115,228 @@ |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</GuipTable> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
</GuipTable> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文本域：固定行数</label> |
|
|
|
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="4" /> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文本域：自适应高度</label> |
|
|
|
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">输入框：</label> |
|
|
|
<GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px" |
|
|
|
placeholder="这是自定义默认提示语" /> |
|
|
|
|
|
|
|
<div style="width: 20px;height: 10px;"></div> |
|
|
|
|
|
|
|
<GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput" |
|
|
|
@blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" /> |
|
|
|
|
|
|
|
<div style="width: 20px;height: 10px;"></div> |
|
|
|
|
|
|
|
<GuipInput v-model="form.input3" 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-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-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 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> |
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
@ -395,6 +376,38 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData3: [{ |
|
|
|
id: '12987122', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '234', |
|
|
|
amount2: '3.2', |
|
|
|
amount3: 10 |
|
|
|
}, { |
|
|
|
id: '12987123', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '165', |
|
|
|
amount2: '4.43', |
|
|
|
amount3: 12 |
|
|
|
}, { |
|
|
|
id: '12987124', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '324', |
|
|
|
amount2: '1.9', |
|
|
|
amount3: 9 |
|
|
|
}, { |
|
|
|
id: '12987125', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '621', |
|
|
|
amount2: '2.2', |
|
|
|
amount3: 17 |
|
|
|
}, { |
|
|
|
id: '12987126', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '539', |
|
|
|
amount2: '4.1', |
|
|
|
amount3: 15 |
|
|
|
}], |
|
|
|
tableWidth: 0, |
|
|
|
currentPage: 1, //当前页 |
|
|
|
pageSize: 5, //每页的容量 |
|
|
|
total: 0, //列表总数 |
|
|
|
@ -408,6 +421,9 @@ export default { |
|
|
|
form: { |
|
|
|
username: '', |
|
|
|
language: '', |
|
|
|
input1: '', |
|
|
|
input2: '', |
|
|
|
input3: '', |
|
|
|
}, |
|
|
|
languageOptions: [ |
|
|
|
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' }, |
|
|
|
@ -502,6 +518,44 @@ export default { |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}], |
|
|
|
tableData4: [{ |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '20', |
|
|
|
age: 20, |
|
|
|
// 在支持修改的项目中，需要主动保留一份原始数据 |
|
|
|
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎11', |
|
|
|
address: '上海市普陀区金沙江路 151811 弄', |
|
|
|
price: '10', |
|
|
|
age: 30, |
|
|
|
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄' |
|
|
|
|
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '200', |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-08', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-06', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-07', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}], |
|
|
|
// 表格列配置 |
|
|
|
columns: [ |
|
|
|
{ prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框 |
|
|
|
@ -556,7 +610,7 @@ export default { |
|
|
|
label: "广州", |
|
|
|
} |
|
|
|
], |
|
|
|
tableData:[], |
|
|
|
tableData: [], |
|
|
|
input: 'hahhahah', |
|
|
|
defaultValue: 'asdasda', |
|
|
|
radio: 3, |
|
|
|
@ -573,8 +627,9 @@ export default { |
|
|
|
borderRadius: '4px', |
|
|
|
}, |
|
|
|
styleObject: { |
|
|
|
width: '200px', |
|
|
|
height: '40px' |
|
|
|
minWidth: '200px', |
|
|
|
maxWidth: '400px', |
|
|
|
// height: '40px' |
|
|
|
}, |
|
|
|
styleObject1: { |
|
|
|
width: '600px', |
|
|
|
@ -620,19 +675,50 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
openMessage(type){ |
|
|
|
changeInputtest(e) { |
|
|
|
console.log(e, '---000changeInputtest'); |
|
|
|
}, |
|
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
|
|
console.log(row, column); |
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
if (columnIndex === 0) { |
|
|
|
return [1, 2]; |
|
|
|
} else if (columnIndex === 1) { |
|
|
|
return [0, 0]; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
|
|
console.log(row, column); |
|
|
|
|
|
|
|
if (columnIndex === 0) { |
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
return { |
|
|
|
rowspan: 2, |
|
|
|
colspan: 1 |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return { |
|
|
|
rowspan: 0, |
|
|
|
colspan: 0 |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
openMessage(type) { |
|
|
|
console.log(type); |
|
|
|
// 单独指定方法调用 |
|
|
|
switch(type){ |
|
|
|
switch (type) { |
|
|
|
case 'success': |
|
|
|
this.$Message.success('成功，文案自定义') |
|
|
|
break; |
|
|
|
break; |
|
|
|
case 'error': |
|
|
|
this.$Message.error('失败，文案自定义') |
|
|
|
break; |
|
|
|
break; |
|
|
|
case 'info': |
|
|
|
this.$Message.info('提示，文案自定义') |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
// 自定义选项 |
|
|
|
// this.$Message({ |
|
|
|
@ -666,15 +752,15 @@ export default { |
|
|
|
type: 0, |
|
|
|
cur_page: 1, |
|
|
|
page_size: 5, |
|
|
|
},{ |
|
|
|
headers:{ |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'AUTH': '3c901fa4a19a7ad9d01238890863d499' |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.tableLoading = false |
|
|
|
this.$nextTick(() => { |
|
|
|
that.tableData = response.data.list |
|
|
|
console.log(that.tableData,'---that.tableData'); |
|
|
|
// console.log(that.tableData,'---that.tableData'); |
|
|
|
// that.type2name = response.data.type2name |
|
|
|
that.total = response.data.total |
|
|
|
}) |
|
|
|
@ -740,8 +826,8 @@ export default { |
|
|
|
onConfirm(row, prop) { |
|
|
|
console.log('确认修改:', row, prop); |
|
|
|
this.$message.success('修改成功'); |
|
|
|
this.$set(this.tableData, row) |
|
|
|
console.log(this.tableData, 'this.tableData====='); |
|
|
|
this.$set(this.tableData4, row) |
|
|
|
console.log(this.tableData4, 'this.tableData====='); |
|
|
|
}, |
|
|
|
// 取消事件 |
|
|
|
onCancel(row, prop) { |
|
|
|
@ -788,7 +874,7 @@ export default { |
|
|
|
console.log(value, 'value===输入框输入得知'); |
|
|
|
}, |
|
|
|
handleClear(value) { |
|
|
|
this.defaultValue = '这是我清除后给的文案' |
|
|
|
this.form.input3 = '这是我清除后给的文案' |
|
|
|
// this.handleInput('') |
|
|
|
console.log(value, 'value===qinghcu'); |
|
|
|
}, |
|
|
|
|
