Vueはelementで$notifyを使ってメッセージの中で改行する問題を解決します。
プロジェクト開発中に、エラーメッセージが必要な場合はバックグラウンドからエラーリスト情報を返し、改行して展示するユーザー体験が必要となります。
実現方法は以下の通りです。
F 12要素から見ると、対応するスタイルにwhite-space:pre-wrapを追加します。このスタイルの主な役割は文字列の改行符「」を識別することです。したがって、表示される情報文字列に対応する改行識別子を追加する必要があります。
$notifyメッセージ・プロンプトでは、el-notificationとして機能します。
.el-notification{white-space:pre-wrap!impotant;
ある子供靴はスタイルを試したことがあるかもしれません。この時、メッセージの内容が長いなら、不完全な問題を表示します。
自動改行スタイルを使っても(無効):
補足知識:vue tsプロジェクトについては、同時にelement-uiとant-designを導入しています。ts報ミスでコンパイルできない解決方法です。
vue tsバージョンは同時にantとelementを導入して包装できません。
Subsequent property declarations must have the same type.Propty'$confirm'must be of type'(modalOptios:ModalOptions)=>ModalConfirm',but here has type'ElMessage BoxShotcutMethod.'
Subsequent property declarations must have the same type.Property'$message'must be of type'Message',but here has type'ElMessage'
通常のvueプロジェクトは一つのuiライブラリしか使えませんが、いくつかの特殊なシーンがあります。uiライブラリは私たちのビジネスシーンを満たしていません。仕事ではant-design-vue(大域導入)とelement-ui(必要に応じてロードします。)を使っています。プロジェクトはtsバージョンです。
element、ant tsエラー
私は多くの解決策を検索しましたが、全部当てはまらなかったです。爆発したところは二つのタイプの説明書が衝突しました。modules/element-ui/types/message-box.d.tsとnode_modules/element-ui/types/message.d.tsの関連しているところを注釈してから包装したら、やはりエラーが発生しません。
コメントでパッケージの問題を解決できますが、毎回コメントすることはできません。この時はnodeのfsカバンが友好的に解決してくれると思います。
ソリューション:
プロジェクトのルートディレクトリでconfigフォルダ、OS.jsファイルを作成します。
OS.jsファイルを作成しました。以下の通りです。
package.json実行コマンドを作成して、私達が作成したos.jsを運転コマンドに加入します。
大きな仕事が完成しました
以上のVue解決はelementの中で$notifyを使っています。ヒントメッセージの中で改行問題は小編集が皆さんに共有している内容の全部です。参考にしてほしいです。どうぞよろしくお願いします。
実現方法は以下の通りです。
F 12要素から見ると、対応するスタイルにwhite-space:pre-wrapを追加します。このスタイルの主な役割は文字列の改行符「」を識別することです。したがって、表示される情報文字列に対応する改行識別子を追加する必要があります。
$notifyメッセージ・プロンプトでは、el-notificationとして機能します。
.el-notification{white-space:pre-wrap!impotant;
ある子供靴はスタイルを試したことがあるかもしれません。この時、メッセージの内容が長いなら、不完全な問題を表示します。
自動改行スタイルを使っても(無効):
/* */
word-wrap: break-word;
word-break: break-all;
具体的な違いは以下のパラメータ部分に参加できます。補足知識:vue tsプロジェクトについては、同時にelement-uiとant-designを導入しています。ts報ミスでコンパイルできない解決方法です。
vue tsバージョンは同時にantとelementを導入して包装できません。
Subsequent property declarations must have the same type.Propty'$confirm'must be of type'(modalOptios:ModalOptions)=>ModalConfirm',but here has type'ElMessage BoxShotcutMethod.'
Subsequent property declarations must have the same type.Property'$message'must be of type'Message',but here has type'ElMessage'
通常のvueプロジェクトは一つのuiライブラリしか使えませんが、いくつかの特殊なシーンがあります。uiライブラリは私たちのビジネスシーンを満たしていません。仕事ではant-design-vue(大域導入)とelement-ui(必要に応じてロードします。)を使っています。プロジェクトはtsバージョンです。
element、ant tsエラー
私は多くの解決策を検索しましたが、全部当てはまらなかったです。爆発したところは二つのタイプの説明書が衝突しました。modules/element-ui/types/message-box.d.tsとnode_modules/element-ui/types/message.d.tsの関連しているところを注釈してから包装したら、やはりエラーが発生しません。
コメントでパッケージの問題を解決できますが、毎回コメントすることはできません。この時はnodeのfsカバンが友好的に解決してくれると思います。
ソリューション:
プロジェクトのルートディレクトリでconfigフォルダ、OS.jsファイルを作成します。
OS.jsファイルを作成しました。以下の通りです。
/**
* element-ui / ant-design ts ,
* node_modules
* */
let fs = require('fs')
let path = require('path')
let src1 = '../node_modules/element-ui/types/message.d.ts'
annotation(src1, '$message: ElMessage')
let src2 = '../node_modules/element-ui/types/message-box.d.ts'
annotation(src2, '$confirm: ElMessageBoxShortcutMethod')
function annotation(src, params) {
fs.readFile(path.resolve(__dirname, src), 'utf8', function(err, files) {
if (!err && files !== '') {
let val = params
let has = `// ${params}`
let start = files.indexOf(val)
let start2 = files.indexOf(has)
if (start > -1 && start2 === -1) {
var result = files.replace(val, has)
fs.writeFile(
path.resolve(__dirname, src),
result,
'utf8',
function(err) {
if (err) {
console.log(err)
}
}
)
console.log(params + ' !')
} else {
console.log(' !')
}
} else {
console.log(
params + ' !'
)
}
})
}
もとの命令は、私達はbuildの部分だけを修正する必要があります。package.json実行コマンドを作成して、私達が作成したos.jsを運転コマンドに加入します。
"scripts": {
"build": "node config/os.js&vue-cli-service build"
},
現在npm run buildを運転しています。大きな仕事が完成しました
以上のVue解決はelementの中で$notifyを使っています。ヒントメッセージの中で改行問題は小編集が皆さんに共有している内容の全部です。参考にしてほしいです。どうぞよろしくお願いします。