效果如下：
首先用乙個div作為dos命令視窗並且放入element的卡片中，然後在div中寫入ul序列以及input輸入框（可自己進行優化）
"card"
class
="box-card" style=
"background:black;color:white;max-height:27.2em;overflow:auto" @click=
"autofocus()"
>
"text" style=
"background:black;color:white;" @click=
"autofocus()"
>
"ul"
>
for=
"(i,b) in total"
:key=
"b">
}>
<
/li>
<
/ul>
v-loading=
"loading"
type=
"text"
id="in"
class
="input_text"
v-model=
"command"
resize=
"none"
@keyup.enter.native=
"enter()"
autofocus=
"autofocus"
>
"prepend" style=
"font-size:18px"
>>
<
/span>
<
/el-input>
<
/div>
<
/el-card>dos命令的執行需要通過後台介面進行收發，也可以自己用node.js來進行處理，附上node.js呼叫dos執行的方法，可用http建立乙個介面進行收發
node.js:
var exec =
require
('child_process'
).exec;
var cmdstr =
'ipconfig'
;exec
(cmdstr,
function
(err,stdout,stderr)
else})
;以下是全部**：
"card"
class
="box-card" style=
"background:black;color:white;max-height:27.2em;overflow:auto" @click=
"autofocus()"
>
"text" style=
"background:black;color:white;" @click=
"autofocus()"
>
"ul"
>
for=
"(i,b) in total"
:key=
"b">
}>
<
/li>
<
/ul>
v-loading=
"loading"
type=
"text"
id="in"
class
="input_text"
v-model=
"command"
resize=
"none"
@keyup.enter.native=
"enter()"
autofocus=
"autofocus"
>
"prepend" style=
"font-size:18px"
>>
<
/span>
<
/el-input>
<
/div>
<
/el-card>
<
/template>
ul .input_text .el-input__inner:focus
.input_text .el-input__inner:hover
.input_text .el-input__inner
.input_text .el-input-group__prepend
<
/style>
export
default},
created()
, directives:))
if(value)}}
},watch:},
deep:
true}}
, methods:})
.then
(response =>$(
'#in').
val('')
// 清空輸入框$(
'#text').
scrolltop($
('#text').
scrolltop()
+32)// 滾動條拉到最下面，顯示出輸入框
_this.total.
push
(' '
) _this.loading =
false
}else})
.catch
(error =>)}
else
if(ip.
indexof
('clear'
)>=0)
else
else}}
,autofocus()
,scoll()
,100
,function()
)}}}
<
/script>
實戰 vue仿dos命令介面
關注 前端小謳 閱讀更多原創技術文章 vue專案中彈出視窗，在視窗中執行dos命令 引入koa const router require koa router 引入koa router newkoa 建立koa應用 const router newrouter 建立路由，支援傳遞引數 const b...
在vue專案中, mock資料
1.在根目錄下建立 test 目錄,用來存放模擬的 json 資料,在 test 目錄下建立模擬的資料 data.json 檔案 2.在build目錄下的 dev server.js的檔案作如下更改 3.在.vue做請求,就可以成功獲取data.json的資料了,下面使用 axios 進行請求axi...
在 Vue 專案中使用 ECharts
重要檔案版本 在 vue 專案中使用 echarts 只需要在 vue 元件的mounted生命週期中 初始化 echarts，然後在每次配置項有變更時呼叫setoption 方法更新配置即可 專案模板原始碼 class default chart style div template import...