twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: standard code format in the views folder

Browse Source
This commit is contained in:
xiaoxian521
2022-05-14 10:53:06 +08:00
parent 1cf82eb7a4
commit 64326c4fb5
31 changed files with 228 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/able/ant-anchor.vue
View File

@@ -12,19 +12,25 @@ function handleAnchorClick(e, link) {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv锚点，采用<el-link
<span class="font-medium">
仿antdv锚点，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/anchor-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>Anchor</el-link
>写法</span
>
>
Anchor
</el-link>
写法
</span>
</div>
</template>
<div class="w-400px">

20
src/views/able/ant-tabs.vue
View File

@@ -13,19 +13,25 @@ const callback = (val: string) => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv标签页，采用<el-link
<span class="font-medium">
仿antdv标签页，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/tabs-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>Tabs</el-link
>写法</span
>
>
Tabs
</el-link>
写法
</span>
</div>
</template>
<el-radio-group v-model="mode" size="small" class="mb-2">

26
src/views/able/ant-treeSelect.vue
View File

@@ -122,19 +122,25 @@ const onLoadData = treeNode => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv树选择，采用<el-link
<span class="font-medium">
仿antdv树选择，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/tree-select-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>TreeSelect</el-link
>写法</span
>
>
TreeSelect
</el-link>
写法
</span>
</div>
</template>
<div class="flex justify-around flex-wrap">
@@ -171,9 +177,9 @@ const onLoadData = treeNode => {
:max-tag-count="10"
>
<template #title="{ title, value }">
<span v-if="value === '0-0-1-0'" style="color: #1890ff">{{
title
}}</span>
<span v-if="value === '0-0-1-0'" style="color: #1890ff">
{{ title }}
</span>
<template v-else>{{ title }}</template>
</template>
</TreeSelect>

9
src/views/able/barcode.vue
View File

@@ -30,12 +30,15 @@ const barcodes = [
<el-card>
<template #header>
<div class="font-medium">
条形码（基于<el-link
条形码（基于
<el-link
href="https://lindell.me/JsBarcode/"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>JsBarcode</el-link
>生成）
>
JsBarcode
</el-link>
生成）
</div>
</template>
<el-row :gutter="12">

38
src/views/able/cascader.vue
View File

@@ -36,12 +36,13 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions1 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions1[0]] }},{{
CodeToText[selectedOptions1[1]]
}}
区域码转汉字：
{{ CodeToText[selectedOptions1[0]] }},
{{ CodeToText[selectedOptions1[1]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions1[0]],
CodeToText[selectedOptions1[1]]
@@ -64,12 +65,13 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions3 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions3[0]] }},{{
CodeToText[selectedOptions3[1]]
}}
区域码转汉字：
{{ CodeToText[selectedOptions3[0]] }},
{{ CodeToText[selectedOptions3[1]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions3[0]],
CodeToText[selectedOptions3[1]]
@@ -92,12 +94,14 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions2 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions2[0]] }},{{
CodeToText[selectedOptions2[1]]
}},{{ CodeToText[selectedOptions2[2]] }}
区域码转汉字：
{{ CodeToText[selectedOptions2[0]] }},
{{ CodeToText[selectedOptions2[1]] }},
{{ CodeToText[selectedOptions2[2]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions2[0]],
CodeToText[selectedOptions2[1]],
@@ -121,12 +125,14 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions4 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions4[0]] }},{{
CodeToText[selectedOptions4[1]]
}},{{ CodeToText[selectedOptions4[2]] }}
区域码转汉字：
{{ CodeToText[selectedOptions4[0]] }},
{{ CodeToText[selectedOptions4[1]] }},
{{ CodeToText[selectedOptions4[2]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions4[0]],
CodeToText[selectedOptions4[1]],

18
src/views/able/debounce.vue
View File

@@ -27,12 +27,12 @@ const throttleClick = useThrottleFn(handle, 1000, false);
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
秒内又触发了事件，则会重新计算函数执行时间。
</div>
<el-button @click="immediateDebounce"
>连续点击我，只会执行最后一次点击事件，立即执行</el-button
>
<el-button @click="debounceClick"
>连续点击我，只会执行最后一次点击事件，延后执行</el-button
>
<el-button @click="immediateDebounce">
连续点击我，只会执行最后一次点击事件，立即执行
</el-button>
<el-button @click="debounceClick">
连续点击我，只会执行最后一次点击事件，延后执行
</el-button>
</el-card>
<el-card>
<template #header>
@@ -42,9 +42,9 @@ const throttleClick = useThrottleFn(handle, 1000, false);
所谓节流，就是指连续触发事件但是在 n
秒中只执行一次函数。节流会稀释函数的执行频率。
</div>
<el-button @click="throttleClick"
>连续点击我，每一秒只会执行一次点击事件</el-button
>
<el-button @click="throttleClick">
连续点击我，每一秒只会执行一次点击事件
</el-button>
</el-card>
</div>
</template>

12
src/views/able/menu-tree.vue
View File

@@ -48,16 +48,18 @@ const filterMethod = (query: string, node: treeNode) => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>菜单树结构（采用element-plus的
<span class="font-medium">
菜单树结构（采用element-plus的
<el-link
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
target="_blank"
:icon="useRenderIcon('node-tree')"
style="font-size: 16px; margin: 0 5px 4px 0"
>Tree V2</el-link
>组件并支持国际化）</span
>
>
Tree V2
</el-link>
组件并支持国际化）
</span>
</div>
</template>
<el-input

9
src/views/able/qrcode.vue
View File

@@ -23,12 +23,15 @@ const disabledClick = () => {
<el-card>
<template #header>
<div class="font-medium">
二维码（基于<el-link
二维码（基于
<el-link
href="https://github.com/soldair/node-qrcode"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>qrcode</el-link
>生成）
>
qrcode
</el-link>
生成）
</div>
</template>
<el-row :gutter="20" justify="space-between">

9
src/views/able/swiper.vue
View File

@@ -102,12 +102,15 @@ const swiperExample: SwiperExample[] = [
<el-card>
<template #header>
<div class="font-medium">
Swiper插件（<el-link
Swiper插件（
<el-link
href="https://github.com/nolimits4web/swiper"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>github地址</el-link
>）
>
github地址
</el-link>
）
</div>
</template>
<el-row :gutter="10">

14
src/views/able/watermark.vue
View File

@@ -14,19 +14,19 @@ const { setWatermark, clear } = useWatermark();
<span class="font-medium">页面水印功能</span>
</div>
</template>
<span>请输入要创建水印的值：</span
><el-input
<span> 请输入要创建水印的值：</span>
<el-input
class="mb-4 mr-4"
style="width: 200px"
v-model="value"
clearable
/>
<span>请选择要创建水印的颜色：</span
><el-color-picker v-model="color" show-alpha />
<span>请选择要创建水印的颜色：</span>
<el-color-picker v-model="color" show-alpha />
<br />
<el-button @click="setWatermark(value, { fillStyle: color })"
>创建</el-button
>
<el-button @click="setWatermark(value, { fillStyle: color })">
创建
</el-button>
<el-button @click="clear">清除</el-button>
</el-card>
</template>