初始化地区合伙人
This commit is contained in:
wangxiaowei
63
src/views/template/component/file.vue
Normal file
63
src/views/template/component/file.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选择图片：</div>
|
||||
<material-picker v-model="state.value1" />
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选择视频：</div>
|
||||
<material-picker type="video" v-model="state.value3" />
|
||||
</div>
|
||||
<div class="flex flex-1 m-4">
|
||||
<div class="mr-4">多张图片：</div>
|
||||
<div class="flex-1">
|
||||
<!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
|
||||
<material-picker :limit="4" v-model="state.value2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="进阶用法" shadow="never" class="!border-none mt-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">自定义选择器大小：</div>
|
||||
<material-picker size="60px" v-model="state.value4" />
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">使用插槽：</div>
|
||||
<material-picker v-model="state.value5">
|
||||
<template #upload>
|
||||
<el-button>选择文件</el-button>
|
||||
</template>
|
||||
</material-picker>
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选出地址不带域名：</div>
|
||||
<material-picker :exclude-domain="true" v-model="state.value6" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex m-4 items-center">
|
||||
<div class="w-20 flex-none">带域名：</div>
|
||||
<el-input class="w-[500px]" :model-value="state.value5" />
|
||||
</div>
|
||||
<div class="flex m-4 items-center">
|
||||
<div class="w-20 flex-none">不带域名：</div>
|
||||
<el-input class="w-[500px]" :model-value="state.value6" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: [],
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: ''
|
||||
})
|
||||
</script>
|
||||
65
src/views/template/component/icon.vue
Normal file
65
src/views/template/component/icon.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="element-plus图标" shadow="never" class="!border-none">
|
||||
<div class="flex items-center">
|
||||
<icon class="m-4" :size="24" name="el-icon-Search" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Plus" />
|
||||
<icon class="m-4" :size="24" name="el-icon-FullScreen" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Setting" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Warning" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="本地图标" shadow="never" class="!border-none mt-4">
|
||||
<div class="flex items-center">
|
||||
<icon class="m-4" :size="24" name="local-icon-baoxian" />
|
||||
<icon class="m-4" :size="24" name="local-icon-youhui" />
|
||||
<icon class="m-4" :size="24" name="local-icon-daiyunying" />
|
||||
<icon class="m-4" :size="24" name="local-icon-diancanshezhi" />
|
||||
<icon class="m-4" :size="24" name="local-icon-dianzifapiao" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="图标选择器" shadow="never" class="!border-none mt-4">
|
||||
<div class="flex items-center">
|
||||
<icon-picker v-model="state.value" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
header="element-plus图标库大全（点击复制图标名称）"
|
||||
shadow="never"
|
||||
class="!border-none mt-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="item in getElementPlusIconNames()" :key="item" class="m-1">
|
||||
<el-button v-copy="item">
|
||||
<icon :name="item" :size="20" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
header="本地图标库大全（点击复制图标名称）"
|
||||
shadow="never"
|
||||
class="!border-none mt-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="item in getLocalIconNames()" :key="item" class="m-1">
|
||||
<el-button v-copy="item">
|
||||
<icon :name="item" :size="20" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getElementPlusIconNames, getLocalIconNames } from '@/components/icon'
|
||||
import Icon from '@/components/icon/index.vue'
|
||||
|
||||
const state = reactive({
|
||||
value: ''
|
||||
})
|
||||
</script>
|
||||
12
src/views/template/component/link.vue
Normal file
12
src/views/template/component/link.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<link-picker v-model="state.value1" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: {}
|
||||
})
|
||||
</script>
|
||||
9
src/views/template/component/overflow.vue
Normal file
9
src/views/template/component/overflow.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<overflow-tooltip class="w-20 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
|
||||
<overflow-tooltip class="w-60 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
48
src/views/template/component/popover_input.vue
Normal file
48
src/views/template/component/popover_input.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="m-4">
|
||||
<popover-input @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 点击输入 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input type="number" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 输入数字 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input size="small" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 调整大小 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input :limit="20" :show-limit="true" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 限制输入长度 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input value="默认值" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 默认值 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const onConfirm = (value: string) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
16
src/views/template/component/rich_text.vue
Normal file
16
src/views/template/component/rich_text.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<editor v-model="state.value1" height="500px" />
|
||||
</el-card>
|
||||
<el-card header="简洁模式" shadow="never" class="!border-none mt-4">
|
||||
<editor v-model="state.value2" height="500px" mode="simple" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: ''
|
||||
})
|
||||
</script>
|
||||
66
src/views/template/component/upload.vue
Normal file
66
src/views/template/component/upload.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="never" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="m-4">
|
||||
<upload
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
type="video"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">上传视频</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
:multiple="false"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">取消多选</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
:limit="2"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">一次最多上传2张</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Upload from '@/components/upload/index.vue'
|
||||
|
||||
const onChange = (file: any) => {
|
||||
console.log('上传文件的状态发生改变', file)
|
||||
}
|
||||
|
||||
const onSuccess = (file: any) => {
|
||||
console.log('上传文件成功', file)
|
||||
}
|
||||
|
||||
const onError = (file: any) => {
|
||||
console.log('上传文件失败', file)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user