前文：随着前端大屏页面的逐渐壮大，客户的需求也越来越多，大屏上面展示的事物也越来越丰 富。其中实时播放监控的需求逐步增加，视频流格式也是有很多种，用到最多的.flv、.m3u8。
一、 JessibucaPlayer插件用来播放flv流
1.首先是先把文件放在vue项目的public下面
2.在index.html文件里面引入 index.js文件（直接引入即可）
3.把封装好的JessibucaPlayer组件放到公共components
-
<template>
-
<div class="jessibuca-player" style="width: 100%; height: 100%">
-
<div class="container" :id="id" ref="container"></div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: "JessibucaPlayer",
-
props: {
-
videoUrl: {
-
type: String,
-
default: ""
-
},
-
id: {
-
type: Number,
-
required: true
-
}
-
},
-
data() {
-
return {
-
jessibuca: null // jessibuca 实例化对象
-
};
-
},
-
methods: {
-
init() {
-
this.jessibuca = new window.Jessibuca({
-
container: document.getElementById(this.id), // 播放器容器,若为 string ，则底层调用的是 document.getElementById('id')
-
videoBuffer: 0.2, // 设置最大缓冲时长，单位毫秒，播放器会自动消除延迟。
-
forceNoOffscreen: true, // 是否不使用离屏模式（提升渲染能力）
-
hasAudio: false, // 是否有音频
-
rotate: 0, // 设置旋转角度，只支持，0(默认) ，180，270 三个值
-
isResize: false, // 1.当为true的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边;2.当为false的时候：视频画面完全填充canvas区域,画面会被拉伸
-
isFullSize: true, // 当为true的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
-
debug: false, // 是否开启控制台调试打印
-
timeout: 30, // 设置超时时长, 单位秒,在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
-
supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
-
showBandwidth: false, // 是否显示网速
-
operateBtns: {
-
// 配置功能
-
fullscreen: false, // 是否显示全屏按钮
-
screenshot: false, // 是否显示截图按钮
-
play: false, // 是否显示播放暂停按钮
-
audio: false // 是否显示声音按钮
-
},
-
keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
-
isNotMute: false, // 是否开启声音，默认是关闭声音播放的。
-
loadingText: "加载中...", // 加载过程中文案。
-
background: "" // 背景图片。
-
});
-
// 事件：
-
this.jessibuca_load()
-
// 1. 监听 jessibuca 初始化事件。
-
this.jessibuca.on("load", () => {
-
this.jessibuca_load()});
-
// 2. 信息，包含错误信息
-
this.jessibuca.on("log", data => this.jessibuca_log(data));
-
// 3. 触发暂停事件
-
this.jessibuca.on("pause", this.jessibuca_pause);
-
// 4. 触发播放事件
-
this.jessibuca.on("play", this.jessibuca_play);
-
// 5. 当前是否全屏
-
this.jessibuca.on("fullscreen", this.jessibuca_fullscreen);
-
// 6. 触发声音事件，返回boolean值
-
this.jessibuca.on("mute", this.jessibuca_mute);
-
// 7. 当解析出音频信息时回调
-
this.jessibuca.on("audioInfo", this.jessibuca_audioInfo);
-
// 8. 当解析出视频信息时回调
-
this.jessibuca.on("videoInfo", this.jessibuca_videoInfo);
-
// 9. 错误信息
-
this.jessibuca.on("error", this.jessibuca_error);
-
// 10. 当设定的超时时间内无数据返回,则回调
-
this.jessibuca.on("timeout", this.jessibuca_timeout);
-
// 11. 流状态统计，流开始播放后回调，每秒1次
-
this.jessibuca.on("start", this.jessibuca_start);
-
// 12. 渲染性能统计，流开始播放后回调，每秒1次
-
this.jessibuca.on("performance", this.jessibuca_performance);
-
// 13. 当前网速， 单位KB 每秒1次,
-
this.jessibuca.on("kBps", this.jessibuca_kBps);
-
},
-
// 事件：
-
jessibuca_load() {
-
// 监听 jessibuca 初始化事件。
-
console.log("on load");
-
console.log("module", this.videoUrl);
-
this.methods_play(this.videoUrl);
-
},
-
jessibuca_log(data) {
-
// 信息，包含错误信息
-
console.log("on log", data);
-
},
-
jessibuca_pause(flag) {
-
// 触发暂停事件
-
console.log("on pause", flag);
-
},
-
jessibuca_play(flag) {
-
// 触发播放事件
-
console.log("on play", flag);
-
},
-
jessibuca_fullscreen(flag) {
-
// 当前是否全屏
-
console.log("on fullscreen", flag);
-
if (flag) {
-
let myEvent = new Event("resize");
-
setTimeout(() => {
-
window.dispatchEvent(myEvent);
-
}, 100);
-
}
-
},
-
jessibuca_mute(flag) {
-
// 触发声音事件
-
console.log("on mute", flag);
-
},
-
jessibuca_audioInfo(data) {
-
// 当解析出音频信息时回调，2个回调参数
-
// 1. numOfChannels：声频通道
-
// 2. sampleRate 采样率
-
console.log("audioInfo", data);
-
},
-
jessibuca_videoInfo(data) {
-
// 当解析出视频信息时回调
-
// 1. w：视频宽
-
// 2. h：视频高
-
console.log("videoInfo", data);
-
},
-
jessibuca_error(error) {
-
// 错误信息
-
console.log("error:", error);
-
},
-
jessibuca_timeout() {
-
// 当设定的超时时间内无数据返回,则回调
-
console.log("timeout");
-
},
-
jessibuca_start(s) {
-
// 流状态统计，流开始播放后回调，每秒1次
-
// 1. buf: 当前缓冲区时长，单位毫秒
-
// 2. fps: 当前视频帧率,
-
// 3. abps: 当前音频码率，单位bit,
-
// 4. vbps: 当前视频码率，单位bit，
-
// 5. ts:当前视频帧pts，单位毫秒
-
// console.log('stats is', s);
-
},
-
jessibuca_performance(performance) {
-
// 渲染性能统计，流开始播放后回调，每秒1次。
-
// 0: 表示卡顿、1: 表示流畅、2: 表示非常流程
-
// console.log('performance', performance);
-
},
-
jessibuca_kBps(kBps) {
-
// 当前网速， 单位KB 每秒1次,
-
// console.log('kBps', kBps);
-
},
-
// 方法：
-
methods_play(url) {
-
// 播放
-
if (this.jessibuca.hasLoaded()) {
-
this.jessibuca.play(url);
-
} else {
-
console.error("视频数据未加载完毕，请稍后操作");
-
}
-
},
-
methods_mute() {
-
// 静音
-
this.jessibuca.mute();
-
},
-
methods_cancelMute() {
-
// 取消静音
-
this.jessibuca.cancelMute();
-
},
-
methods_pause() {
-
// 暂停
-
this.jessibuca.pause();
-
},
-
methods_setVolume(volume) {
-
// 设置音量
-
this.jessibuca.setVolume(volume);
-
},
-
methods_setRotate(rotate) {
-
// 设置旋转角度 0\180\270
-
this.jessibuca.setRotate(rotate);
-
},
-
methods_destroy() {
-
// 关闭视频，释放底层资源
-
if (this.jessibuca) {
-
this.jessibuca.destroy();
-
}
-
},
-
methods_fullscreen(flag) {
-
// 全屏(取消全屏)播放视频
-
this.jessibuca.setFullscreen(flag);
-
},
-
methods_screenShot() {
-
// 截图
-
// 1. screenshot(filename, format, quality)
-
// 2. {string} filename、 {string} format、{number} quality
-
// 3.filename: 保存的文件名, 默认 时间戳、format : 截图的格式，可选png或jpeg或者webp ,默认 png、quality: 可选参数，当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 0.92
-
this.jessibuca.screenshot();
-
},
-
methods_setBufferTime(time) {
-
// 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
-
// {number} time
-
this.jessibuca.setBufferTime(Number(time));
-
},
-
methods_setScaleMode(mode) {
-
// 设置播放器填充
-
// 1. 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 isResize 为false
-
// 2. 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 isResize 为true
-
// 3. 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 isFullSize 为true
-
this.jessibuca.setScaleMode(Number(mode));
-
},
-
restartPlay() {
-
// 重新加载
-
this.methods_destroy();
-
this.methods_play(this.videoUrl);
-
}
-
},
-
mounted() {
-
this.init();
-
window.onerror = msg => (this.err = msg);
-
},
-
beforeDestroy() {
-
if (this.jessibuca) this.jessibuca.destroy();
-
}
-
};
-
</script>
-
-
<style>
-
@import url("./JessibucaPlayer.css");
-
</style>
4.最后再自己用到的文件里面 引入组件即可
如有想要文件的请私聊
二、easyplayer插件播放m3u8流
教程：
1.首先npm安装EasyPlayer、copy-webpack-plugin
ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否则会报错。
-
npm install @easydarwin/easyplayer --save
-
npm install copy-webpack-plugin@5.1.2 --save-dev
2.最重要的地方 一定要把这个地方弄好 那就是在vue.config.js里面
-
const CopyWebpackPlugin = require('copy-webpack-plugin')
-
configureWebpack: {
-
plugins:[
-
new CopyWebpackPlugin([
-
{
-
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
-
to: './libs/EasyPlayer/'
-
},
-
{
-
from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
-
to: './libs/EasyPlayer/'
-
},
-
{
-
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
-
to: './libs/EasyPlayer/'
-
}
-
])
-
]
-
}
3.还需要在public/index.html 引入EasyPlayer-lib.min.js，可以直接在node_modules里找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js复制到pubilc目录下,还有需要EasyPlayer.wasm同样放到public目录下
4.引入组件使用
最后效果
Vue2.0使用Object.defineProperty
原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知
// 数据 let data = { title: '', // 备份数据 _data: {} } // 定义特性 Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取值方法 get() { // console.log('get') // 注意：不能通过自身属性取值 // return this.title // 返回备份的数据 return this._data.title; }, // 赋值方法 set(value) { // this指向对象 // 注意：不能为自身属性赋值 // this.title = value // 我们可以向备份数据中存储 this._data.title = value; // console.log('set') // 更新视图 updateView(this._data) } }) // 视图模板 let tpl = document.getElementById('app').innerHTML // 实现更新视图的方法 function updateView(data) { // 处理模板 let html = tpl.replace(/{{(w+)}}/g, (match, $1) => { // 从data中获取数据 return data[$1] || '' }) // 更新视图 document.getElementById('app').innerHTML = html; }
使用ES6的新特性porxy
原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="yingaxiang" content="width=device-width, initial-scale=1.0"> <title>vue3.0数据双向绑定</title> </head> <body> <div> <input type="text" id="input"> <span id="text"></span> </div> </body> </html> <script> var obj = {}; var obj1 = new Proxy(obj, { // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象) get: function (target, key, receive) { // 返回该属性值 return target[key]; }, set: function (target, key, newVal, receive) { // 执行赋值操作 target[key] = newVal; document.getElementById('text').innerHTML = target[key]; } }) document.addEventListener('keyup', function (e) { obj1[0] = e.target.value; }); </script>
总结：
Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象，并返回一个新对象
未创建过vue脚手架得同学 或者从线上拉项目下来得同学 可以首先 查一下 当前版本
1：查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4
vue --version
2：如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装
安装3.0版本: 目前新项目搭建脚手架默认安装得是3.0版本
npm install -g vue-cli
如果是旧项目2.0版本到3.0切换得同学，即卸载当前版本，安装另外的版本
从2.0升级到3.0：
npm uninstall -g vue-cli
npm install -g @vue/cli
如果想从新版本降到旧版本得同学 看这里！！
从3.0降到2.0：
npm uninstall -g @vue/cli
npm install -g vue-cli
项目初始化
初始化，vue init <模板名称（webpack比较常用）> [项目名称]
vue init webpack cli2-test
2.0项目初始化参数介绍
//项目名称 Project name ... //作者的信息，会默认从git中读取信息 Project description ... Author ... //vue build的选项 1.runtime-compiler 2.runtime-only (一般选第一个就好) vue build ... //是否安装vue-router，一般选用YES，省去手动创建路由 Install vue-router？ .. //是否使用ESLint检测代码规范，规范可根据选项选择不同的规范库或者自己添加规范 use ESLint to link your code //是否写单元测试 （一般不使用） Set up unit tests //是否使用Nightwatch来进行e2e测试 （2代表to e to e 点对点） Setup e2e test with Nightwatch？ //使用npm或者yarn包管理工具 use npm use yarn
3.0初始化，vue create [项目名称]
vue create cli3-test ?项目初始化参数介绍 //选择一个配置方式 please pick a perset (一般选最后一个Manually select features（手动选择特性） ) //选择对于你的工程所需要的特性 （用空格选择） check the features needed for your project ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 ( ) Router // vue-router（vue路由） ( ) Vuex // vuex（vue的状态管理模式） ( ) CSS Pre-processors // CSS 预处理器（如：less、sass） ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint） ( ) Unit Testing // 单元测试（unit tests） ( ) E2E Testing // e2e（end to end） 测试 //对应的配置文件单独生成还是放在package.json里 where do you prefer placing config for babel //要不要把刚才自己选择的配置保存下来 save this as a preset for future projects?
总结：
我们可以通过在项目根目录下手动创建不同环境的配置文件，具体的环境变量名称由package.json中运行参数决定,下面举个例子添加development、production和uat版本的环境变量：
// .env.delelopment NODE_ENV=development VUE_APP_MODE=development BASE_URL=/develop // .env.production NODE_ENV=production VUE_APP_MODE=production BASE_URL=/api // .env.uat NODE_ENV=production VUE_APP_MODE=uat BASE_URL=/uat 不同得环境发不同的包 同学要配置得可以参考 // package.json ---- "scripts": { "serve": "vue-cli-service serve", "build:uat": "vue-cli-service build --mode uat", // 通过 --mode来运行不同的环境，自动识别到.env.uat配置文件 "build:production": "vue-cli-service build --mode production", "lint": "vue-cli-service lint" },
3.0版本中不同环境的webpack配置文件也没有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）
同样，我们也可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置
const path = require('path') module.exports = { publicPath: './', // 基本路径,打包时加上. outputDir: process.env.outputDir, // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // webpack配置 chainWebpack: (config) => { config.resolve.symlinks(true) }, configureWebpack: (config) => { if (process.env.VUE_APP_MODE === 'production') { // 为生产环境修改配置... config.mode = 'production' } else { // 为开发环境修改配置... config.mode = 'development' } Object.assign(config, { // 开发生产共同配置 resolve: { alias: { '@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components'), '@p': path.resolve(__dirname, './src/views') } // 别名配置 } }) }, productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 // css相关配置 css: { // extract: true, // 是否使用css分离插件 ExtractTextPlugin sourceMap: false, // 开启 CSS source maps? loaderOptions: { css: {}, // 这里的选项会传递给 css-loader less: { modifyVars: { // less vars，customize ant design theme // 'primary-color': '#F5222D', // 'link-color': '#F5222D', // 'border-radius-base': '4px' }, // DO NOT REMOVE THIS LINE javascriptEnabled: true }, postcss: { plugins: [ // 把px单位换算成rem单位 require('postcss-pxtorem')({ rootValue: 75, // 换算的基数(设计图750的根字体为32) selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。 propList: ['*'], // 可以从px更改为rem的属性。 minPixelValue: 2 // 设置要替换的最小像素值。 }), require('autoprefixer') ] // plugins: [ // require('autoprefixer') // ] } // 这里的选项会传递给 postcss-loader }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions // modules: false, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: true }, parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa // webpack-dev-server 相关配置 devServer: { open: false, // 自动打开浏览器 host: '0.0.0.0', // 允许外部ip访问 port: 8000, // 端口 https: false, // 启用https overlay: { warnings: true, errors: true }, // 错误、警告在页面弹出 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } }, // 配置多个代理 }, // 第三方插件配置 pluginOptions: {}
https://blog.csdn.net/qq_41328247/article/details/109286022
2.0 周期名称
3.0 周期名称
说明
beforeCreate
setup
组件创建之前
created
setup
组件创建完成
beforeMount
onBeforeMount
组件挂载之前
mounted
onMounted
组件挂载完成
beforeUpdate
onBeforeUpdate
数据更新，虚拟 DOM 打补丁之前
updated
onUpdated
数据更新，虚拟 DOM 渲染完成
beforeDestroy
onBeforeUnmount
组件销毁之前
destroyed
onUnmounted
组件销毁后
<template> <router-link to="/">点这里去首页</router-link> <hr> <div class="home"> 这里是一个计数器 >>> <span class="red">{{count}}</span> <br> <button @click="countAdd">点击加数字</button> </div> </template> <script> // 你需要使用到什么生命周期，就引出来什么生命周期 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue' export default { // setup 函数，就相当于 vue 2.0 中的 created setup () { const count = ref(0) // 其他的生命周期都写在这里 onBeforeMount (() => { count.value++ console.log('onBeforeMount', count.value) }) onMounted (() => { count.value++ console.log('onMounted', count.value) }) // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！ onBeforeUpdate (() => { console.log('onBeforeUpdate', count.value) }) onUpdated (() => { console.log('onUpdated', count.value) }) onBeforeUnmount (() => { count.value++ console.log('onBeforeUnmount', count.value) }) onUnmounted (() => { count.value++ console.log('onUnmounted', count.value) }) // 定义一个函数，修改 count 的值。 const countAdd = () => { count.value++ } return { count, countAdd } } } </script> 首先，在 vue 3.0 中，生命周期是从 vue 中导出的，我们需要用到哪些，就导出哪些。
可能不少看官会认为多次一举，但实则不然。vue 提供这么多的生命周期，有几个是我们常用的？在大多数的组件中，我们用不到生命周期。即便是页面级别的应用，可能用到最多的是 onMounted 即可。
当然，那些绑定时间的操作会用到解绑，因此会用到 onUnmounted。其它的生命周期，正常情况下是基本用不到的。所以，通过引入使用的这种设定，可以减少我们的最终编译的项目的体积。而且，这样的引入使用，更加的逻辑清晰。
其次，除 setup 之外，其他的生命周期函数，都是在 setup 里面直接书写函数即可。
Vue2.x 版本启动
npm run dev
Vue3.x 版本启动
npm run serve
1.v-model语法糖废弃，改用modelValue
<input v-model="value" />
<input modelValue="value" />
2.弃用全局APInew Vue,使用createApp
const app =?Vue.createApp({})
3.弃用Vue.prototype,在Vue3中，我们可以使用如下定义方式
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
4.全局方法现在全部在app实例上，例如：
`app.directive`,`app.use`等
5.现在你需要手动挂载根节点
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
6.不能再使用Vue.nextTick/this.$nextTick，Vue3中你可以用：
import { nextTick } from 'vue'
nextTick(() => {
// something
})
7.Vue3允许template设置key。
8.正式弃用scopedSlots正式弃用，旧的不去新的不来。
9.监听数组变化需要使用deep属性，否则只能监听到整个数组被替换。
10.弃用$children，访问子组件可以使用$ref
11.filter被移除，我X，不能再使用|了。
12.移除事件API，$on,$once,$off不再使用。EventBus方法也不再使用。
2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行
3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
目录
（1）HTML,CSS,JS都是单独的语言；
（2）HTML,CSS,JS构成前端技术基础；
（1）HTML：负责网页的架构；
（2）CSS：负责网页的样式，美化；
（3）JavaScript（JS）：负责网页的行为；
我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。如图：
前端开发推荐安装的几个插件：
HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。
注意：HTML不是一种编程语言，而是一种标记语言。
简单来说，HTML文件也可以直接称为网页，浏览器的作用就是读取HTML文件，并且以网页的形式去展示它们。
HTML标签是由尖括号包围起来的关键词，如<html></html>。
单标签与双标签
（1）双标签书写规则：<双标签名称>内容</双标签名称>，例如<html>内容</html>；
（2）单标签书写规则：<单标签名称/>，例如<br/>;
HTML属性指的是标签属性，HTML标签可以拥有属性，给相关的HTML元素提供更多的信息。
注意：
（1）一个HTML标签可有多个属性；
（2）属性写在HTML元素的开始标签；
（3）属性总是以名称/键值对的形式出现，比如：class="method";
https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501![[这里是图片001]](https://img.it610.com/image/info8/fc2a12c61c434077a76fb964e37dc767.jpg){kind=link}
![[这里是图片002]](https://img.it610.com/image/info8/c2395aacfe314686bfedb5cd37e5e624.jpg){kind=link}
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initialscale=1.0">
-
<title>Document</title>
-
</head>
-
<body>
-
</body>
-
</html>
HTML的文章标题标签，如：<h1></h1>~<h6></h6>分六个级别，效果一次减少，并且每个标题都是独占一行空间。
如：
-
<h1>⼀号标题</h1>
-
<h2>⼆号标题</h2>
-
<h3>三号标题</h3>
-
<h4>四号标题</h4>
-
<h5>五号标题</h5>
-
<h6>六号标题</h6>
注意：没有<h7></h7>标签；
2.1空格问题
；表示一个空格；
如：
hello world2.2换行问题
<br/>表示换行；
如：
-
hello
-
<br/>
-
world
扩展：对于HTML语言，没有严格的语义，即<br>与<br/>或者<br >浏览器都可以识别出来。
html1.0~5.0 xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)
3.1段落标签介绍
HTML段落是通过<p></p>标签进行定义的。
如：
-
<h2>今⽇学习内容：</h2>
-
<p>学了标题标签</p>
作用：（1）虽然p标签的文字显示外观来看，和普通文字没有区别，但是它独占一行；
（2）标签语义化，便于定位；
3.2标签语义化
在合适的地方显示合理的标签，搜索引擎也偏好于标签语义化做的更好的页面。
4.1加粗标签
（1）<b></b>为加粗标签；
（2）<strong></strong>为加粗标签；
如：
-
普通⽂字
-
<b>我是加粗⽂字1</b>
-
<strong>我是加粗⽂字2</strong>
区别：b标签为简单加粗；strong为加粗效果+特别强调效果；
4.2倾斜
（1）<i></i> 为倾斜标签；
（2）<em></em>也可实现倾斜；
如：
-
普通⽂字
-
<i>我是i</i>
-
<em>我是em</em>
区别：em标签的语义更强一些。i为倾斜了，em为又倾斜了。
4.3删除
<s></s> 删除效果；
<del></del> 删除效果；
如：
-
原价:<s>998</s>
-
现值:9.98
-
<br>
-
原价:<del>999</del>
-
现价:9.98
注意：这两个标签没有任何语义区别，而w3c则说明s标签要被del标签替代；
<img scr="" alt="" width="" height="" title="">
如：
<img src="Logo2.png" alt="加载中" width="500" height="500" title="⿏标悬停在图⽚上的提示⽂字">6.1超链接使用
超链接：点击页面发生跳转；
使用标签为：<a href=""></a>
其中href为：跳转的网址；
如：
<a href="https://www.baidu.com">点击我可以打开百度</a>target=”_blank"：在其它窗口打开新连接；
<a href="https://www.baidu.com" target="_blank">点击我可以打开百度,并且打开新 的窗⼝</a>6.2空链接
空链接：在href中指定为#号即可；
作用：（1）暂时不知道点击之后跳转到哪里，使用空链接占位；
（2）刷新界面；
<a href="#"></a>列表标签可分为：无序列表和有序列表。
7.1无序列表
使用标签：<ul><li></li><li></li><li></li></ul>
注意：
（1）ul标签可以嵌套若干个li标签；
（2）每一个li标签代表着每一条数据；
（3）每个li标签之间没有顺序；
如：
-
<ul>
-
<li>python</li>
-
<li>java</li>
-
<li>go</li>
-
</ul>
7.2有序列表
使用标签：<ol><li></li><li></li><li></li></ol>
注意：
（1）有序；
（2）且是ol开始的；
如：
-
<ol>
-
<li>基础班级</li>
-
<li>测试</li>
-
<li>python</li>
-
</ol>
8.1布局标签的介绍
布局标签没有任何的语义，也没有所谓的应用场景。
作用：划分页面区域，辅助页面布局；
布局标签为：
div标签：<div></div> 大盒子，独占一行；
span标签：<span></span>小盒子，一行可以放多个；
-
<div>我是div</div>
-
<div>我是div</div>
-
<div>我是div</div>
-
<div>我是div</div>
-
<span>我是span</span>
-
<span>我是span</span>
-
<span>我是span</span>
-
<span>我是span</span>
9.1表格标签介绍
作用：展示数据非常整齐；
基本语法：
-
<table>
-
<tr>
-
<td></td>
-
</tr>
-
</table>
（1）table标签：定义表格标签；
（2）tr标签：定义表格中的行；
th标签：表格单元格；
td标签：定义表格中的单元格，必须嵌套其中；
9.2表格标签的其他属性
（1）align：表格对齐方式。如：left，center，right；
（2）border：表格边框。如：1；
（3）cellpadding：单元边沿与其内容之间的空白，默认为1像素；
（4）cellspacing：单元格与单元格之间的空白，默认为2像素；
（5）width：设置表格宽度；
注意：需要写在table标签里；
9.3表格结构标签
表格结构标签：表格头部和表格主体两大部分；
（1）表格头部区域：<thead>标签；
（2）表格主体区域：<tbody>标签；
作用：结构就更加清晰，让表格有更好的语义；
9.4合并单元格
（1）合并单元格方式
跨行合并：rowspan="合并单元格的个数"；
跨列合并：colspan="合并单元格的个数"；
（2）目标单元格
跨行：最上册单元格为目标单元格，写合并代码；
跨列：最左侧单元格为目标单元格，写合并代码；
（3）合并单元格步骤
1.先确定是跨行还是跨列合并；
2.找到目标单元格；
3.删除多余单元格；
10.1表单标签介绍
表单标签我们可以直接称为 form 标签，标签书写如下：
（1）表单标签：<form action=""></form>。form表单标签里面就是所有用户填写的表单数据；
（2）属性 action：把表单数据交给指定后台程序去处理；
（3）属性 method：传递数据时方式方法。
1.默认为post请求（隐式提交数据）；
2.get明文传送数据；
如：
-
<form action="***.py" method="POST">
-
</form>
10.2输入框与单选多选框
输入框标签（input标签）：<input type="text">
（1）type：属性指定输入框内容；
（2）type="text"：则是最普通的文本输入框。为单行；
（3）type="password"：则为密码输入框。为单行；
placeholder：给用户提示（提升用户体验感的属性），并且在为本域中都可以使用；
（4）type="radio"：单选框；
（5）type="checkbox"：为多选框；
如：
-
<!-- 填写用户名及密码 -->
-
<span>用户名：</span>
-
<input type="text" placeholder="请输入用户名">
-
<br>
-
<span>密码：</span>
-
<input type="password" placeholder="请输入密码">
-
<br>
-
<!-- 选择信息：选择 性别 爱好 -->
-
<!-- 单选按钮 -->
-
<!-- 一组按钮：他们俩都是来控制性别的,添加name属性 -->
-
<span>性别：</span>
-
<input type="radio" name="gender">
-
<span>男</span>
-
-
<input type="radio" name="gender">
-
<span>女</span>
-
<br>
-
<!-- 多选按钮 -->
-
<span>兴趣爱好：</span>
-
<!-- <input type="checkbox"> 睡觉
-
<input type="checkbox"> 打游戏
-
<input type="checkbox"> 女
-
<input type="checkbox"> 羽毛球 -->
-
<!-- 优化:点击文字也可以选中多选框 -->
-
<input type="checkbox" id="sleep">
-
<label for="sleep">睡觉</label>
-
<input type="checkbox" id="playgame">
-
<label for="playgame">打游戏</label>
-
<input type="checkbox" id="liangnv">
-
<label for="liangnv">女</label>
-
<input type="checkbox" id="yumaoqiu">
-
<label for="yumaoqiu">羽毛球</label>
-
<br>
10.3下拉框
使用标签：select为下拉框的标签，嵌套若干个option标签。其中每一个option为下拉框中的一个选项。
selected="selected"。表示默认选中状态；
-
<select name="" id="">
-
<option value=""></option>
-
</select> 123
如：
-
<select name="" id="">
-
<option value="">北京</option>
-
<option value="">上海</option>
-
<option value="">⼴州</option>
-
<option value="" selected="selected">深圳</option>
-
</select> <br>
10.4文本域
使用标签：<textarea name="", cols="30" rows="10"></textarea>
（1）cols：列；
（2）rows：行；
-
建议：
-
<textarea name="" id="" cols="30" rows="10"></textarea>
-
<br>
10.5按钮标签
（1）普通按钮：
标签：input指定type="button"；
通过value属性，指定按钮的文字；
如：
-
普通按钮：
-
<input type="button" value="按钮">
-
<br>
（2）重置按钮：点击重置按钮就会将数据恢复到默认状态；
标签：input指定type="reset";
注意：重置按钮自动会有重置的文字；
如果指定为value属性，则显示什么；
如：
-
重置按钮：
-
<input type="reset" value="重置按钮">
-
<br>
（3）提交按钮：点击提交按钮可以让表单提交给指定后台处理；
标签：input指定type="submit";
注意：提交按钮自动会有提交的文字；
如：
-
提交按钮：
-
<input type="submit" value="我是提交">
上一篇总结了在实操过程中如果遇到了nodejs版本的问题，我们该如何去解决的，还有就是总结了vue2和vue3生命周期的区别，如果感兴趣的可以去看看上一篇的内容vue生命周期基础知识了解一下。
那知道了vue的生命周期知识点，接下就开始vue模板语法吧，在Vue中，Vue模板对应的就是Vue中的View（视图）部分，也是Vue重中之一，而在Vue中要了解Vue模板我们就需要从两个方面来着手，其一是Vue的模板语法，其二就是模板渲染。模板语法较简单一点，但对于模板的渲染（模板编译）就会更为复杂一些，如果需要了解模板渲染就需要对Vue的渲染函数，响应式原理之类的要有所了解。
<!-- App.vue --> <template> <div id="app"> {{ message }} </div> </template>
上面的代码演示的仅仅Vue模板中的一种方式，也是最简单和最常见的一种模板方式。
在Vue中，模板语法是逻辑和视图之间的沟通桥梁，使用模板语法编写的HTML会响应Vue实例中的各种变化，简单地说，Vue实例中的逻辑可以随心所欲的渲染在页面上。
Vue模板中插值常见的使用方法主要有：文本、原始HTML、属性、JavaScript表达式、指令和修饰符**等。
使用了v-once指令的话，那么该插值就是一次性地插值。也就是说，当数据改变时，插值处的内容不会更新。其使用如下所示：
<!-- App.vue --> <template> <div id="app"> <span v-once>{{ message }}</span> </div> </template>
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。另外动态渲染任意的HTML会有一定的危险，因为它很容易导致XSS攻击。
插值语法中（也就是{{}}）会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令，比如下面这个示例：
<!-- App.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div>{{rawHTML}}</div> <div v-html="rawHTML"></div> </div> </template> <script> export default { name: 'app', data () { return { rawHTML: '<span style="color:red;">原始HTML</span>' } } } </script>
在布尔特性的情况下，它们的存在即暗示为true， v-bind 工作起来略有不同，比如：
<button v-bind:disabled="isButDisabled">Button</button>
现在有很多项目vue项目都有很好用的vue模板，这里就总结一些常用的末班集合。
BootstrapVue 拥有85个以上的组件，45个以上的可用插件，多个指令和670+个图标， 它提供了可用于Vue.js v2.6的Bootstrap v4.5组件和网格系统的最全面的实现之一 ，并具有广泛的功能和自动 WAI-ARIA 可访问性标记。
采用 BootstrapVue 构建响应式、移动优先、ARIA项目（Accessible Rich Internet Application，可访问的富媒体应用，即无障碍友好应用)，基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4
GitHub地址：BootstrapVue直接进入
element-ui应该常用了，使用 Element需要先引入整个 Element-ui
在 main.js 中写入以下内容：
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app',
render: h => h(App) });
点击跳转跳转地址：Element-ui地址
还有一些开源的项目比如：
renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案
前后端分离，通过token进行数据交互，可独立部署* 主题定制，通过scss变量统一一站式定制* 动态菜单，通过菜单管理统一管理访问路由* 数据切换，通过mock配置对接口数据／mock模拟数据进行切换* 发布时，可动态配置CDN静态资源／切换新旧版本.
以下是一个使用React开发的左侧三级菜单的基本示例：
import React, { useState } from 'react';
const Menu = () => {
const [menuItems, setMenuItems] = useState([
{
id: 1,
name: 'Menu Item 1',
subMenuItems: [
{ id: 1, name: 'Sub-menu Item 1' },
{ id: 2, name: 'Sub-menu Item 2' }
]
},
{
id: 2,
name: 'Menu Item 2',
subMenuItems: [
{ id: 3, name: 'Sub-menu Item 3' },
{ id: 4, name: 'Sub-menu Item 4' }
]
}
]);
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
const [selectedSubMenu, setSelectedSubMenu] = useState(null);
const handleMenuItemClick = (menuItem) => {
setSelectedMenuItem(menuItem.id);
setSelectedSubMenu(null);
};
const handleSubMenuClick = (subMenuItem) => {
setSelectedSubMenu(subMenuItem.id);
};
return (
<div className="menu">
{menuItems.map((menuItem) => (
<div key={menuItem.id}>
<button onClick={() => handleMenuItemClick(menuItem)}>
{menuItem.name}
</button>
{selectedMenuItem === menuItem.id && (
<ul>
{menuItem.subMenuItems.map((subMenuItem) => (
<li key={subMenuItem.id}>
<button onClick={() => handleSubMenuClick(subMenuItem)}>
{subMenuItem.name}
</button>
{selectedSubMenu === subMenuItem.id && (
<ul>
<li>Sub-menu item details</li>
</ul>
)}
</li>
))}
</ul>
)}
</div>
))}
</div>
);
};
export default Menu;
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
HTML代码：
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a href="javascript:;">菜单1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜单1-1</a></dd>
<dd><a href="javascript:;">子菜单1-2</a></dd>
<dd><a href="javascript:;">子菜单1-3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">菜单2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜单2-1</a></dd>
<dd><a href="javascript:;">子菜单2-2</a></dd>
<dd>
<a href="javascript:;">子菜单2-3</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜单2-3-1</a></dd>
<dd><a href="javascript:;">子菜单2-3-2</a></dd>
<dd><a href="javascript:;">子菜单2-3-3</a></dd>
</dl>
</dd>
</dl>
</li>
</ul>
</div>
</div>
JavaScript代码：
//JavaScript代码需要引入layui.js文件
layui.use('element', function(){
var element = layui.element;
});
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作，也请与我们联系01063334945。 分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
import React, { useState } from 'react';
function BasicForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default BasicForm;
此表单组件具有三个输入字段：名称、电子邮件和消息。useState Hook 用于存储表单数据，并且 handleChange 函数处理输入字段值的更改。handleSubmit 函数在提交表单时被调用并打印出表单数据至控制台。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库。以下是 React 快速入门的步骤：
安装 React：可以通过命令行工具使用 npm 或者 yarn 安装 React。
创建 React 应用程序：可以使用脚手架工具（如 create-react-app）快速创建基本的 React 应用程序。
编写组件：React 的核心是组件，您需要编写组件来构建应用程序。组件是一个可重复使用的代码块，它包含了 HTML 和 JavaScript 代码。
渲染组件：使用 ReactDOM.render() 方法将组件渲染到页面上。
处理事件：React 使用类似 HTML 的语法来处理事件。在组件中定义事件处理程序，例如 onClick 或者 onSubmit，并将其绑定到相应的元素上。
状态管理：React 允许您使用状态来管理数据。您可以使用 setState() 方法更新组件的状态，并在组件中读取状态以显示不同的内容。
生命周期：React 组件有生命周期方法，这些方法允许您在组件生命周期内执行操作。例如，componentDidMount() 方法在组件被挂载后执行一次，用于初始化数据。
这些是 React 快速入门的基本步骤。要深入了解 React，请查阅相关文档和教程。
React 生命周期指的是React组件在挂载（mounting）、更新（updating）和卸载（unmounting）等不同阶段所经历的生命周期方法，包括：
其中，constructor()是组件实例化时第一个被调用的方法；static getDerivedStateFromProps()将props映射为state的方法；render()渲染组件的虚拟DOM；componentDidMount()在组件挂载后执行；shouldComponentUpdate()控制组件是否需要重新渲染；getSnapshotBeforeUpdate()捕获更新前的DOM状态；componentDidUpdate()在组件更新后执行；componentWillUnmount()在组件卸载前执行清理操作。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Vue组件实例在创建、更新和销毁过程中，会依次触发一些钩子函数，这些钩子函数称为Vue生命周期函数。Vue的生命周期分为四个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。
在创建阶段，Vue实例正在被创建，这个阶段中包含了实例化、数据观测、事件/钩子初始化等过程。具体包括以下钩子函数：
在这个阶段，Vue实例将模板渲染成真实的DOM并进行挂载到页面上。具体包括以下钩子函数：
在这个阶段，当Vue实例的数据变化时，它会重新渲染虚拟DOM并更新到页面上。具体包括以下钩子函数：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
使用layui实现前端换肤功能可以通过以下几个步骤完成：
安装layui：我们需要从官方网站下载安装layui。你可以在https://www.layui.com/下载最新版本。
引入样式文件：在HTML页面中引入需要的样式文件。我们可以使用layuicss提供的样式表来实现各种外观效果。如果您需要自定义样式，请创建自己的CSS文件，并在HTML中引入。
创建主题颜色列表：我们需要创建一个包含所有可用主题颜色的列表。您可以使用数组或JSON对象来创建此列表。例如：
javascript复制代码
var themeColors = [
{name: '默认', color: '#009688'},
{name: '橙色', color: '#FFB800'},
{name: '墨绿', color: '#393D49'},
{name: '紫色', color: '#800080'},
{name: '深蓝', color: '#285FD3'}
];
javascript复制代码
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化颜色选择器 colorpicker.render({ elem: '#theme-color-picker',
colors
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
蓝蓝 http://www.lanlanwork.com