mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-09 13:53:38 +08:00
refactor: 重构国际化文件命名规范以及演示页加上代码位置提示 (#1034)
* refactor: 重构国际化文件命名规范以及演示页加上代码位置提示
This commit is contained in:
xiaoming
GitHub
@@ -44,6 +44,13 @@ const barcodes = [
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/barcode.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-row :gutter="12">
|
||||
<template v-for="(item, index) in barcodes" :key="index">
|
||||
|
||||
@@ -116,6 +116,13 @@ function addDanmu() {
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/danmaku
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="flex gap-5">
|
||||
<vue-danmaku
|
||||
|
||||
@@ -19,7 +19,14 @@ const throttleClick = throttle(handle);
|
||||
<div>
|
||||
<el-card class="mb-5" shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">防抖：debounce</div>
|
||||
<p class="font-medium">防抖：debounce</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/debounce.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
|
||||
|
||||
@@ -56,7 +56,14 @@ function onReset() {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
|
||||
<p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/directives.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb-2">
|
||||
|
||||
@@ -28,7 +28,14 @@ function down() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span class="font-medium">文件下载功能</span>
|
||||
<p class="font-medium">文件下载功能</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/download.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
<el-button
|
||||
|
||||
@@ -68,6 +68,13 @@ onMounted(() => {
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/draggable.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="drag-container">
|
||||
<!-- grid列表拖拽 -->
|
||||
|
||||
@@ -72,16 +72,21 @@ const exportExcel = () => {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
导出Excel（
|
||||
<el-link
|
||||
href="https://github.com/SheetJS/sheetjs"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
导出Excel
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/excel.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
|
||||
<div class="h-[25rem] mt-3">
|
||||
|
||||
@@ -35,16 +35,21 @@ const load = () => {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
表格无限滚动（
|
||||
<el-link
|
||||
href="https://github.com/yujinpan/el-table-infinite-scroll"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
表格无限滚动
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/infinite-scroll.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
|
||||
<el-table
|
||||
|
||||
@@ -25,9 +25,16 @@ const dataProps = {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
扩展elemenet-plus的树形组件包括虚拟树组件，支持连接线
|
||||
</span>
|
||||
<p class="font-medium">
|
||||
扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
|
||||
</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/line-tree.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ const filterMethod = (query: string, node: treeNode) => {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
菜单树结构（采用element-plus的
|
||||
菜单树结构（采用 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
|
||||
target="_blank"
|
||||
@@ -59,6 +59,13 @@ const filterMethod = (query: string, node: treeNode) => {
|
||||
组件并支持国际化）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/menu-tree.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="query"
|
||||
|
||||
@@ -190,203 +190,211 @@ onUnmounted(() => {
|
||||
<template>
|
||||
<el-card shadow="never" :body-style="{ padding: '20px' }">
|
||||
<template #header>
|
||||
基于
|
||||
<div>
|
||||
基于
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="https://github.com/mqttjs/MQTT.js"
|
||||
target="_blank"
|
||||
>
|
||||
MQTT.js
|
||||
</el-link>
|
||||
和 免费的公共MQTT代理
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="broker.emqx.io"
|
||||
target="_blank"
|
||||
>
|
||||
EMQX
|
||||
</el-link>
|
||||
实现的一套 MQTT 客户端
|
||||
</div>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="https://github.com/mqttjs/MQTT.js"
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
|
||||
target="_blank"
|
||||
>
|
||||
MQTT.js
|
||||
代码位置 src/views/able/mqtt-client.vue
|
||||
</el-link>
|
||||
和 免费的公共MQTT代理
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="broker.emqx.io"
|
||||
target="_blank"
|
||||
>
|
||||
EMQX
|
||||
</el-link>
|
||||
实现的一套 MQTT 客户端。
|
||||
</template>
|
||||
<template #default>
|
||||
<el-card shadow="never">
|
||||
<h1>设置</h1>
|
||||
<el-form label-position="top" :model="connection">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="protocol" label="协议">
|
||||
<el-select
|
||||
v-model="connection.protocol"
|
||||
@change="handleProtocolChange"
|
||||
>
|
||||
<el-option label="ws://" value="ws" />
|
||||
<el-option label="wss://" value="wss" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="host" label="主机">
|
||||
<el-input v-model="connection.host" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="port" label="端口">
|
||||
<el-input
|
||||
v-model.number="connection.port"
|
||||
type="number"
|
||||
placeholder="8083/8084"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="clientId" label="客户端ID">
|
||||
<el-input v-model="connection.clientId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="username" label="用户名">
|
||||
<el-input v-model="connection.username" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="connection.password" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="client.connected"
|
||||
:loading="btnLoadingType === 'connect'"
|
||||
@click="createConnection"
|
||||
<el-card shadow="never">
|
||||
<h1>设置</h1>
|
||||
<el-form label-position="top" :model="connection">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="protocol" label="协议">
|
||||
<el-select
|
||||
v-model="connection.protocol"
|
||||
@change="handleProtocolChange"
|
||||
>
|
||||
{{ client.connected ? "已连接" : "连接" }}
|
||||
</el-button>
|
||||
<el-option label="ws://" value="ws" />
|
||||
<el-option label="wss://" value="wss" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="host" label="主机">
|
||||
<el-input v-model="connection.host" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="port" label="端口">
|
||||
<el-input
|
||||
v-model.number="connection.port"
|
||||
type="number"
|
||||
placeholder="8083/8084"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="clientId" label="客户端ID">
|
||||
<el-input v-model="connection.clientId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="username" label="用户名">
|
||||
<el-input v-model="connection.username" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="connection.password" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-button
|
||||
v-if="client.connected"
|
||||
type="danger"
|
||||
:loading="btnLoadingType === 'disconnect'"
|
||||
@click="destroyConnection"
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="client.connected"
|
||||
:loading="btnLoadingType === 'connect'"
|
||||
@click="createConnection"
|
||||
>
|
||||
{{ client.connected ? "已连接" : "连接" }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="client.connected"
|
||||
type="danger"
|
||||
:loading="btnLoadingType === 'disconnect'"
|
||||
@click="destroyConnection"
|
||||
>
|
||||
断开连接
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>订阅</h1>
|
||||
<el-form label-position="top" :model="subscription">
|
||||
<el-row :gutter="20" :align="'middle'">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic" label="主题">
|
||||
<el-input
|
||||
v-model="subscription.topic"
|
||||
:disabled="subscribedSuccess"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select
|
||||
v-model="subscription.qos"
|
||||
:disabled="subscribedSuccess"
|
||||
>
|
||||
断开连接
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>订阅</h1>
|
||||
<el-form label-position="top" :model="subscription">
|
||||
<el-row :gutter="20" :align="'middle'">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic" label="主题">
|
||||
<el-input
|
||||
v-model="subscription.topic"
|
||||
:disabled="subscribedSuccess"
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select
|
||||
v-model="subscription.qos"
|
||||
:disabled="subscribedSuccess"
|
||||
>
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'subscribe'"
|
||||
:disabled="!client.connected || subscribedSuccess"
|
||||
@click="doSubscribe"
|
||||
>
|
||||
{{ subscribedSuccess ? "已订阅" : "订阅" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subscribedSuccess"
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'unsubscribe'"
|
||||
:disabled="!client.connected"
|
||||
@click="doUnSubscribe"
|
||||
>
|
||||
取消订阅
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>发布</h1>
|
||||
<el-form label-position="top" :model="publish">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic">
|
||||
<template #label>
|
||||
<span>主题</span>
|
||||
<el-text type="info" size="small">
|
||||
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
|
||||
</el-text>
|
||||
</template>
|
||||
<el-input v-model="publish.topic" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="payload" label="有效载荷">
|
||||
<el-input v-model="publish.payload" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select v-model="publish.qos">
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoadingType === 'publish'"
|
||||
:disabled="!client.connected"
|
||||
@click="doPublish"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>接收</h1>
|
||||
<el-col :span="24">
|
||||
<el-input
|
||||
v-model="receivedMessages"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
readonly
|
||||
/>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'subscribe'"
|
||||
:disabled="!client.connected || subscribedSuccess"
|
||||
@click="doSubscribe"
|
||||
>
|
||||
{{ subscribedSuccess ? "已订阅" : "订阅" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subscribedSuccess"
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'unsubscribe'"
|
||||
:disabled="!client.connected"
|
||||
@click="doUnSubscribe"
|
||||
>
|
||||
取消订阅
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>发布</h1>
|
||||
<el-form label-position="top" :model="publish">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic">
|
||||
<template #label>
|
||||
<span>主题</span>
|
||||
<el-text type="info" size="small">
|
||||
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
|
||||
</el-text>
|
||||
</template>
|
||||
<el-input v-model="publish.topic" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="payload" label="有效载荷">
|
||||
<el-input v-model="publish.payload" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select v-model="publish.qos">
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoadingType === 'publish'"
|
||||
:disabled="!client.connected"
|
||||
@click="doPublish"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>接收</h1>
|
||||
<el-col :span="24">
|
||||
<el-input
|
||||
v-model="receivedMessages"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
readonly
|
||||
/>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -38,21 +38,26 @@ const onPrint = () => {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
PDF预览（
|
||||
<el-link
|
||||
href="https://github.com/hrynko/vue-pdf-embed"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
PDF预览
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/pdf.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="h-[calc(100vh-239px)]"
|
||||
:element-loading-text="t('status.hsLoad')"
|
||||
class="h-[calc(100vh-295px)]"
|
||||
:element-loading-text="t('status.pureLoad')"
|
||||
>
|
||||
<div class="flex justify-between items-center h-9">
|
||||
<div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
|
||||
@@ -73,28 +78,28 @@ const onPrint = () => {
|
||||
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
|
||||
显示所有页面
|
||||
</el-checkbox>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="`翻转（当前角度${rotations[currentRotation]}度）`"
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
icon="ic:baseline-rotate-90-degrees-ccw"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="
|
||||
currentRotation === 3
|
||||
? (currentRotation = 0)
|
||||
: (currentRotation += 1)
|
||||
"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="打印" placement="top">
|
||||
<IconifyIconOnline
|
||||
icon="ri:printer-line"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="onPrint"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<IconifyIconOnline
|
||||
v-tippy="{
|
||||
maxWidth: 'none',
|
||||
content: `翻转（当前角度${rotations[currentRotation]}度）`
|
||||
}"
|
||||
icon="ic:baseline-rotate-90-degrees-ccw"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="
|
||||
currentRotation === 3
|
||||
? (currentRotation = 0)
|
||||
: (currentRotation += 1)
|
||||
"
|
||||
/>
|
||||
<IconifyIconOnline
|
||||
v-tippy="{
|
||||
maxWidth: 'none',
|
||||
content: '打印'
|
||||
}"
|
||||
icon="ri:printer-line"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="onPrint"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
|
||||
@@ -10,7 +10,14 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">汉语拼音</span>
|
||||
<p class="font-medium">汉语拼音</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/pinyin.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<p v-html="html('带 音 调')" />
|
||||
|
||||
@@ -81,25 +81,30 @@ const tableData: User[] = [
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">打印功能（报表、图表、图片）</span>
|
||||
<div class="flex">
|
||||
<el-select
|
||||
v-model="value"
|
||||
class="!w-[100px] mr-2"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button size="small" type="primary" @click="onPrint">
|
||||
打印
|
||||
</el-button>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="value"
|
||||
class="!w-[100px] mr-2"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button size="small" type="primary" @click="onPrint">
|
||||
打印
|
||||
</el-button>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/print
|
||||
</el-link>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
@@ -196,10 +201,4 @@ const tableData: User[] = [
|
||||
:deep(.el-table__row.success-row) {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,6 +36,13 @@ const disabledClick = () => {
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/qrcode.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
|
||||
@@ -7,7 +7,14 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">波纹(Ripple)</div>
|
||||
<p class="font-medium">波纹(Ripple)</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/ripple.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="mb-5">组件中的波纹</div>
|
||||
<el-alert
|
||||
|
||||
@@ -21,7 +21,14 @@ function onInput() {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">敏感词过滤</span>
|
||||
<p class="font-medium">敏感词过滤</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/sensitive.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
|
||||
@@ -14,7 +14,14 @@ const options: TypeItOptions = {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 打字机组件 </span>
|
||||
<p class="font-medium">打字机组件</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/typeit.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<TypeIt :options="options" />
|
||||
|
||||
@@ -17,16 +17,21 @@ function onFail() {
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
拼图人机验证、右滑拼图验证（
|
||||
<el-link
|
||||
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
拼图人机验证、右滑拼图验证
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/verify.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
|
||||
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
|
||||
|
||||
@@ -134,6 +134,13 @@ onBeforeUnmount(() => {
|
||||
工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
|
||||
</p>
|
||||
</span>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/video-frame
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
|
||||
@@ -48,6 +48,13 @@ onMounted(() => {
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/video.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<div id="mse" />
|
||||
</el-card>
|
||||
|
||||
@@ -36,16 +36,22 @@ onBeforeUnmount(() => {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
页面水印
|
||||
<el-link
|
||||
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
（查看更详细的使用文档）
|
||||
页面水印
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/watermark.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-space wrap class="!mb-2">
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
@@ -120,9 +126,7 @@ onBeforeUnmount(() => {
|
||||
<el-button plain @click="clear">清除整页水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div ref="local" class="w-1/2 h-[200px] border border-sky-500" />
|
||||
<div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
|
||||
|
||||
<el-space wrap class="mt-6">
|
||||
<el-button
|
||||
@@ -190,8 +194,9 @@ onBeforeUnmount(() => {
|
||||
<el-button plain @click="clearLocal">清除局部水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div ref="preventLocal" class="w-1/2 h-[200px] border border-indigo-500" />
|
||||
<div
|
||||
ref="preventLocal"
|
||||
class="w-1/2 h-[200px] border border-indigo-500 mt-4"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -93,6 +93,13 @@ onBeforeUnmount(() => {
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/wavesurfer
|
||||
</el-link>
|
||||
</template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
|
||||
Reference in New Issue
Block a user