在Google Chrome中，單擊三個垂直點，然后導航到“保存并共享>創建快捷方式”。
在Firefox中，在桌面上創建Firefox的快捷方式，右鍵單擊圖標，單擊“屬性”，并在可執行路徑后插入網站URL。然后將其固定到開始菜單或任務欄。
快速訪問常用或難以記憶的網站可以節省你的時間和沮喪情緒。無論你使用Chrome、Firefox還是Edge，你都可以在Windows 10任務欄或“開始”菜單上添加任何網站的快捷方式。
從Google Chrome固定網站
導航到要固定的網站。單擊Chrome右上角的三個垂直點，將鼠標懸停在“保存并共享”上，然后選擇“創建快捷方式”。
在彈出菜單中，如果需要，更改快捷方式的名稱，然后單擊“創建”。這將自動在Windows桌面上創建一個圖標，并將鏈接固定到任務欄。
默認情況下，Chrome將在正常的Chrome瀏覽器窗口中以選項卡的形式打開網頁。當你點擊快捷方式時，你可以選中“以窗口方式打開”選項，讓Chrome在自己的窗口中打開帶有任務欄圖標的頁面。
在桌面上，右鍵單擊快捷方式，然后單擊“固定到開始屏幕”。你現在可以刪除桌面上的快捷方式。如果不想在任務欄上顯示，也可以選擇“從任務欄取消固定”。
如果你將網站設置為作為窗口打開，它將立即作為自己的窗口打開。然后，你可以右鍵單擊任務欄上的快捷方式，然后選擇“固定到任務欄”，而不使用桌面快捷方式。
從Firefox固定網站
在桌面上創建Firefox的快捷方式。你可以在「開始」菜單中鍵入“Firefox”，右鍵單擊圖標，然后單擊“打開文件位置”。
在新的文件資源管理器窗口中，右鍵單擊Firefox，然后單擊“創建快捷方式”。將出現一個提示，說：“Windows無法在此處創建快捷方式。你想將快捷方式放在桌面上嗎？”單擊“是”。
右鍵單擊桌面上的新Firefox圖標，然后單擊“屬性”。在“目標”字段中，在引號后插入要固定的網站的完整URL。以下是目標字段的外觀示例：
"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" https://www.howtogeek.com單擊“確定”。
在桌面上，右鍵單擊快捷方式，然后單擊“固定到開始屏幕”或“固定到任務欄”。你現在可以刪除桌面上的快捷方式。
從Microsoft Edge固定網站
微軟基于Chromium的Edge瀏覽器的工作原理與谷歌Chrome類似。要將任何網站固定到任務欄，只需打開“設置和更多”菜單（Alt+F，或單擊瀏覽器右上角的三個水平點）。將鼠標懸停在“更多工具”上，然后單擊“固定到任務欄”或“固定到開始菜單”。
此外，Edge還有一個名為“啟動任務欄固定向導”的巧妙功能，你可以在“固定到任務欄”的正下方看到。單擊此項，Edge將引導你通過一個短菜單將最受歡迎的網站和Microsoft web應用程序固定到任務欄。
1添加抽屜組件
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'
//控制抽屜是否顯示
const visibleDrawer = ref(false)
//添加表單數據模型
const articleModel = ref({
title: '',
categoryId: '',
coverImg: '',
content: '',
state: ''
})2抽屜
<!-- 抽屜 -->
<el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
<!-- 添加文章表單 -->
<el-form :model="articleModel" label-width="100px">
<el-form-item label="文章標題">
<el-input v-model="articleModel.title" placeholder="請輸入標題"></el-input>
</el-form-item>
<el-form-item label="文章分類">
<el-select placeholder="請選擇" v-model="articleModel.categoryId">
<el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文章封面">
<!--
auto-upload:設置是否自動上傳
action:設置服務器接口路徑
name:設置上傳的文件字段名
headers:設置上傳的請求頭
on-success:設置上傳成功的回調函數
-->
<el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
action="/api/upload"
name="file"
:headers="{'Authorization':tokenStore.token}"
:on-success="uploadSuccess"
>
<img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="文章內容">
<div class="editor">
<quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
</quill-editor>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addArticle('已發布')">發布</el-button>
<el-button type="info" @click="addArticle('草稿')">草稿</el-button>
</el-form-item>
</el-form>
</el-drawer>3顯示抽屜
<template #header>
<div class="header">
<span>文章管理</span>
<div class="extra">
<el-button type="primary" @click="visibleDrawer = true">添加文章</el-button>
</div>
</div>
</template>4.安裝富文本編輯器
npm install @vueup/vue-quill@latest --save
導入組件樣式
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
頁面調用
<el-form-item label="文章內容">
<div class="editor">
<quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
</quill-editor>
</div>
</el-form-item>樣式
.editor {
width: 100%;
:deep(.ql-editor) {
min-height: 200px;
}
}
5.文章封面上傳
//導入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();
//上傳成功的回調函數
const uploadSuccess = (result)=>{
articleModel.value.coverImg = result.data;
console.log(result.data);
}<el-form-item label="文章封面">
<!--
auto-upload:設置是否自動上傳
action:設置服務器接口路徑
name:設置上傳的文件字段名
headers:設置上傳的請求頭
on-success:設置上傳成功的回調函數
-->
<el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
action="/api/upload"
name="file"
:headers="{'Authorization':tokenStore.token}"
:on-success="uploadSuccess"
>
<img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>6.添加事件
<el-form-item>
<el-button type="primary" @click="addArticle('已發布')">發布</el-button>
<el-button type="info" @click="addArticle('草稿')">草稿</el-button>
</el-form-item>//添加文章
import {ElMessage} from 'element-plus'
const addArticle = async (clickState)=>{
//把發布狀態賦值給數據模型
articleModel.value.state = clickState;
//調用接口
let result = await articleAddService(articleModel.value);
ElMessage.success(result.msg? result.msg:'添加成功');
//讓抽屜消失
visibleDrawer.value = false;
//刷新當前列表
articleList()
}7.article.js添加函數