Vue3常用插件

一、文档md

安装组件

npm i md-editor-v3

组件内使用

<script lang="ts" setup>
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import markdownTxt from '@/assets/md/README.md?raw'
const text = ref(markdownTxt)
</script>

<template>
    <MdEditor v-model="text" />
</template>

二、富文本tinymce

安装富文本

npm i @tinymce/tinymce-vue
npm i tinymce

封装组件

<script setup lang="ts">
import { ref, watch } from 'vue'
// 引入组件
import Editor from "@tinymce/tinymce-vue"
import { type RawEditorOptions } from "tinymce/tinymce"; 
// 引入编辑器
import "tinymce/tinymce"; 
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/models/dom/model'

const props = defineProps({
    content: {
        type: String,
        default: "",
    },
})

//用于接收外部传递进来的富文本
const Content = ref(props.content)

// 以时间作为id
const ID = ref<string>(`#vue-tinymce-${new Date().getTime()}`)


// 增加外部数据变化监听器
const emits = defineEmits(["contentchange"])

//监听外部传递进来的的数据变化
watch(() => props.content, () => {
    // 监听外部内容变化
    Content.value = props.content
})

//监听富文本中的数据变化
watch(() => Content.value, () => {
    // 监听内部变量变化 回传给外部组件
    emits("contentchange", Content.value)
})

const init: RawEditorOptions = {
    //富文本编辑器的id,
    selector: ID.value,
    // 语言包的路径
    language_url: "/tinymce/langs/zh-Hans.js",
    language: "zh-Hans", //语言
    // skin路径
    skin_url: "/tinymce/skins/ui/oxide",
    //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
    content_css: '/tinymce/skins/content/default/content.css',
}

</script>

<template>
    <div>
        <Editor :id="ID" :init="init" v-model="Content" />
    </div>
</template>

组件内使用

<script setup lang="ts">
import HomeComponents from '@/views/home/components/HomeComponents.vue'
import TEditor from '@/components/ATinymce.vue'
import { ref } from "vue";
const content = ref('')
const Contentchange = (data: any) => {
    console.log('data', data)
}
</script>
<template>
   <div>
      <TEditor v-model="content" @contentchange="Contentchange" />
   </div>
</template>

<style lang="scss" ></style>

三、语言i18n

安装

npm install vue-i18n

编辑字段

//i18n/zh.ts
export default {
    login: {
        name: '中文'
    }
}

//i18n/en.ts
export default {
    login: {
        name: 'English'
    }
}

//i18n/index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
export default createI18n({
    locale: 'ja',
    fallbackLocale: 'zh',
    messages: {
        zh,
        en
    }
})

注册

//main.ts
import i18n from "@/i18n"
app.use(i18n)

切换按钮

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const seleLanguage = () => {
  if (locale.value == 'zh') {
    locale.value = 'en'
    return
  }
  if (locale.value == 'en') {
    locale.value = 'zh'
    return
  }
}
</script>
<template>
    <el-card>
        <el-button @click="seleLanguage">{{$t('login.name')}}</el-button>
    </el-card>
</template>

四、浏览器调用摄像头后扫码

import { reactive, toRefs } from 'vue'
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'

const state = reactive({
  data: null
})

const onDecode = (data) => {
  state.data = data
}
toRefs(state)

 <div class="content">
    <qr-stream @decode="onDecode" class="mb"> 
            <div style="color: red;" class="frame"></div>
    </qr-stream>
    <span>将二维码放入框内，即可自动扫描</span>
    {{ data }}
 </div>

五、轮播图Swiper11

npm i swiper

• slidesPerView 视图个数
• spaceBetween 间隔
• loop 重复
• autoplay 自动

<script setup lang="ts">
// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle'
// register Swiper custom elements
register()

const onSlideChange = () => {
    console.log('slide change');
};

const arr = [
    '789',
    '456',
    '123'
]

</script>
<template>
    <div>
        <swiper 
        :slidesPerView="1" 
        :spaceBetween="30" 
        :loop="true"
        :autoplay="{ delay: 1000, disableOnInteraction: false }"
        @slideChange="onSlideChange">
            <swiper-slide v-for="item of arr" :key="item">
                {{item}}
            </swiper-slide>
        </swiper>
    </div>
</template>