interface Web
js tutoriel
Comment réaliser l'effet d'exclusion mutuelle de la fonction d'édition d'enregistrement de chat?
Comment réaliser l'effet d'exclusion mutuelle de la fonction d'édition d'enregistrement de chat?
Apr 04, 2025 pm 01:30 PM
Introduction du problème
Lors de la mise en ?uvre de la fonction de modification d'enregistrement de chat, l'utilisateur espère que lorsque vous cliquez sur un enregistrement de chat pour modifier, puis en cliquant sur un autre enregistrement, l'état d'édition de l'enregistrement précédent peut être désactivé pour obtenir un effet mutuellement exclusif. Cependant, l'effet réel est que tous les enregistrements cliqués afficheront la zone d'édition en même temps, et l'effet mutuellement exclusif attendu ne peut pas être réalisé.
Processus de mise en ?uvre spécifique
Sous-composants:
<div class="Chat-Container" v-if="props.dialogData.showeditContent && changegid">
<div class="Chat-Input-box">
<div class="top-box" v-wading="contentloading">
<el-interf id="Chat-Input" autosize v-model="editContent" type="textarea" input="updatecursorposition" click="updatecursorposition" keyup="updatecursorposition" : placeholder="$ t ('text_send_to')"></el-interf>
</div>
</div>
<div class="input-tips">
ESC Key <span class="pub-color"> annuler </span> · Entrez Key <span class="pub-color"> Enregistrer </span>
</div>
</div>
<div v-else: class="['dc-chat-content', props.dialogdata.author.bot? 'dc-chat-bot-content': '']">
<el-popover placement="droite" : visible="toolsVisible" offset="1" show-arrow="false" popper-class="Custom-Popper" t>
<div v-if="! props.dialogData.checked" class="plus">
<el-button-group>
<el-tooltip v-for="item in Menuitems" : key="item.id" effect="dark" content="item.title" placement="top">
<el-button: icon="item.icon" size="small" : disabled click="handlelect (item.id)"></el-button:>
el-tooltip>
el-bouton-groupe>
</el-tooltip></el-button-group>
</div>
<p> Code principal dans le script des composants enfants:</p>
<pre class="brush:php;toolbar:false"> const props = DefineProps <dcdialogitemprops> ()
const emit = defineeMits ()
const Menuiuitems = [
{
id: '1',
Ic?ne: ?fini?,
Titre: $ t ('text_multiple_choice')
},
{
ID: '2',
Ic?ne: ?édition?,
Titre: $ t ('btn_edit')
},
{
ID: '3',
Ic?ne: 'chatdotsquare',
Titre: $ t ('btn_reply')
}
]]
// Gire l'élément de menu Cliquez sur l'événement const editContent = ref ('')
const changegid = ref ('')
const CurrentEditing = ref (false) // utilisé pour marquer si le formulaire soumet const hatlesselect = (val: string) => {
if (val === '1') {
Props.dialogData.checked = true
} else if (val === '2') {
console.log ('- mancheselect --- 2', props.dialogData);
Props.dialogData.isediting = true
CurrentEditing.Value = false
editContent.value = props.dialogdata.content
changelid.value = props.dialogdata.msg_id
}
EMIT (?Menuclick?, Val, Prophes.dialogData)
}</dcdialogitemprops>
Utilise le composant parent:
<dcdialogitem v-for="item in messagelist" menu-click="handlemeNuclick" class="list-list-item" : key="item.msg_id" dialog-data="item" id="'' msg 'item.msg_id"></dcdialogitem>
Le format de données de Messagelist:
[
{
"msg_id": "1276491426334769232",
"Contenu": "Oh, fort",
"Vérifié": faux
},
{
"msg_id": "1276493284222701702",
"Contenu": "Asdasdaasdsadasd",
"Vérifié": faux
},
... omis]
Méthode principale du script du composant parent:
const handlemeNuclick = (val: string, dialogData: any) => {
if (val === '1') {
Messagelist.value.ForEach ((item) => {
item.checked = true
})
showRecords.Value = true
showReplymsg.value = false
DialogData.ShowEditContent = False
} else if (val === '2') {
showReplymsg.value = false
RépondreAuthor.Value = ''
showrecords.value = false
DialogData.ShowEditContent = True
} else if (val === '3') {
showReplymsg.value = true
DialogData.ShowEditContent = False
RépondreAuthor.Value = DialogData.Author.Username
RépondreContent.Value = DialogData.Content
}
}
Problème de solution
Le problème est que lorsque l'utilisateur clique sur un autre enregistrement de chat, la propriété ShowitContent ne ferme pas mutuellement exclusivement l'état d'édition des autres enregistrements. Pour résoudre ce problème, vous devez maintenir un état d'édition global dans le composant parent et fermer l'état d'édition des autres enregistrements chaque fois que vous cliquez sur Modifier.
La méthode HandlemeNuclick dans le composant parent peut être modifiée comme suit:
const handlemeNuclick = (val: string, dialogData: any) => {
if (val === '1') {
Messagelist.value.ForEach ((item) => {
item.checked = true
item.showEditContent = false // Assurez-vous que tout l'état d'édition est fermé})
showRecords.Value = true
showReplymsg.value = false
DialogData.ShowEditContent = False
} else if (val === '2') {
Messagelist.value.ForEach ((item) => {
item.showeditContent = false // Fermez l'état d'édition des autres enregistrements})
showReplymsg.value = false
RépondreAuthor.Value = ''
showrecords.value = false
DialogData.ShowEditContent = true // seul l'état d'édition de l'enregistrement actuel est activé} else if (val === '3') {
Messagelist.value.ForEach ((item) => {
item.showEditContent = false // Assurez-vous que tout l'état d'édition est fermé})
showReplymsg.value = true
DialogData.ShowEditContent = False
RépondreAuthor.Value = DialogData.Author.Username
RépondreContent.Value = DialogData.Content
}
}
Grace à la modification ci-dessus, chaque fois que vous cliquez sur l'édition, l'état d'édition de tous les autres enregistrements sera d'abord fermé, puis l'état d'édition de l'enregistrement actuel sera activé, réalisant ainsi un effet mutuellement exclusif.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Solana (Sol Coin) Prévisions de prix: 2025-2030 et Future Outlook
Aug 06, 2025 pm 08:42 PM
Table des matières L'historique des prix de Solana et les données importantes du marché Données importantes dans le tableau des prix Solana: 2025 Prévisions de prix Solana: Optimiste 2026 Prévisions de prix Solana: Maintenir la tendance 2026 Prévisions de prix Solana: 2030 Solana Prévisions de prix à long terme: Top Blockchain? Qu'est-ce qui affecte les prévisions des prix du soleil? évolutivité et Solana: Avantages compétitifs devriez-vous investir dans Solana dans les prochaines années? Conclusion: Prospects des prix de Solana Conclusion: Solana a son excellente évolutivité, ses faibles co?ts de transaction et sa grande efficacité
Blockchain Browser: Un outil incontournable pour interroger les informations de transaction de monnaie numérique
Aug 06, 2025 pm 11:27 PM
Le navigateur Blockchain est un outil nécessaire pour interroger les informations de transaction de monnaie numérique. Il fournit une interface visuelle pour les données de blockchain, afin que les utilisateurs puissent interroger le hachage de transaction, la hauteur de blocage, le solde d'adresse et d'autres informations; Son principe de travail comprend la synchronisation des données, l'analyse, l'indexation et l'affichage de l'interface utilisateur; Les fonctions principales couvrent les détails de la transaction de requête, les informations de bloc, le solde d'adresse, les données de jetons et l'état du réseau; Lorsque vous l'utilisez, vous devez obtenir TXID et sélectionner le navigateur blockchain correspondant tel que Etherscan ou Blockchain.com pour rechercher; Interroger les informations de l'adresse pour afficher l'historique du solde et des transactions en entrant l'adresse; Les navigateurs grand public incluent Bitcoin's Blockchain.com, Ethereum's Etherscan.io, B
Blockstream lance la simplicité pour apporter de nouvelles alternatives à la solidité d'Ethereum (ETH)
Aug 06, 2025 pm 08:45 PM
L'essor d'un langage de programmation de contrats intelligents dédié pour différentes architectures. Blockstream, dirigé par Adamback, a officiellement lancé Simplicity, un langage de contrat intelligent natif con?u pour Bitcoin, offrant à la solidité d'Ethereum une nouvelle option compétitive. En tant que créateur de Liquid, le réseau de deuxième couche de Bitcoin, Blockstream a un fond profond dans le domaine du chiffrement, et son leader Adamback est une figure clé de l'histoire du développement de Bitcoin. Le langage de simplicité publié cette fois vise à introduire une programmabilité plus forte dans l'écosystème Bitcoin. Selon les nouvelles de l'entreprise à Cointelegraph jeudi, simplifié
De la blockchain à la crypto-monnaie, une analyse complète des concepts de base
Aug 06, 2025 pm 11:51 PM
La blockchain est une technologie de registre numérique distribué et décentralisé. Ses principes principaux comprennent: 1. Le grand livre distribué garantit que les données sont stockées simultanément sur tous les n?uds; 2. Technologie de chiffrement, liant les blocs par le biais de valeurs de hachage pour garantir que les données ne sont pas falsifiées; 3. Les mécanismes de consensus, tels que POW ou POS, garantissent que les transactions sont convenues entre les n?uds; 4. Décentralisation, éliminant un seul point de contr?le, améliorant la résistance à la censure; 5. Contrats intelligents, protocoles d'exécution automatisée. Les crypto-monnaies sont des actifs numériques émis en fonction de la blockchain. Le processus de fonctionnement est: 1. L'utilisateur initie les transactions et les signes numériquement; 2. Les transactions sont diffusées au réseau; 3. Le mineur ou le vérificateur vérifie la validité de la transaction; 4. Plusieurs transactions sont emballées dans de nouveaux blocs; 5. Confirmer la nouvelle zone par le mécanisme consensuel
Ethereum, une plate-forme blockchain qui dépasse le bitcoin, avec des avantages et des stocks d'innovation
Aug 06, 2025 pm 11:57 PM
Grace à ses contrats intelligents Turing-Complete, ses machines virtuelles EVM et ses mécanismes de gaz, Ethereum a construit une plate-forme blockchain programmable au-delà du bitcoin, soutenant les écosystèmes d'application diversifiés tels que Defi et NFT; Ses principaux avantages incluent un écosystème DAPP riche, une forte programmabilité, une communauté de développeurs actifs et une interopérabilité transversale; Il met actuellement en ?uvre une transformation consensuelle de la POW au POS à travers la mise à niveau d'Ethereum 2.0, introduisant des cha?nes de balises, des mécanismes de vérificateur et des systèmes de punition pour améliorer l'efficacité énergétique, la sécurité et la décentralisation; à l'avenir, il s'appuiera sur la technologie de rupture pour réaliser le fragment des données et le traitement parallèle, améliorant considérablement le débit; Dans le même temps, la technologie Rollup a été largement utilisée comme solution de couche 2, Rollup optimiste et ZK-Rollu
Les dix principales plates-formes de trading de devises au monde, les dix principales applications de logiciels de trading dans le cercle des devises
Aug 06, 2025 pm 11:42 PM
Binance: est connu pour sa liquidité élevée, son support multi-monnaie, ses modes de trading diversifiés et ses puissants systèmes de sécurité; 2. OKX: fournit des produits de trading diversifiés, de la disposition Defi et NFT, et possède un moteur de correspondance haute performance; 3. Huobi: profondément engagé sur le marché asiatique, prête attention aux opérations de conformité et fournit des services professionnels; 4. Coinbase: solide conformité, interface amicale, adaptée aux novices et est une entreprise cotée; 5. Kraken: mesures de sécurité strictes, prend en charge plusieurs monnaies fiduciaires et a une transparence élevée; 6. Bibit: se concentre sur le commerce dérivé, la faible latence et le contr?le complet des risques; 7. Kucoin: Rich Devise, soutient les projets émergents et peut profiter de dividendes avec les KC; 8. Gate.io: nouvelles pièces fréquentes, avec copie tr
Contrats intelligents - Protocole d'exécution automatique sur la blockchain
Aug 06, 2025 pm 11:48 PM
Les contrats intelligents sont des programmes d'exécution automatique stockés sur des blockchains. Le noyau consiste à implémenter la logique "if ... alors ..." via le code pour exécuter des protocoles d'une manière décentralisée et sans stimulation. 1. Code d'écriture: définir la logique contractuelle à l'aide de langues telles que la solidité; 2. Compiler: convertir le code en bytecode lisible par machine; 3. Deploy: publiez le bytecode sur la blockchain via les transactions et générez une adresse unique; 4. Exécution de déclenchement: lorsque les conditions prédéfinies sont remplies, le contrat s'exécutera automatiquement; 5. Enregistrer le résultat: toutes les opérations sont enregistrées en permanence sur la cha?ne pour assurer la transparence et la vérifiabilité. Il résout la confiance, l'efficacité, le co?t, la transparence et les risques d'exécution dans les protocoles traditionnels, et est largement utilisé dans les domaines de la cha?ne d'approvisionnement, de la gestion des droits d'auteur, du vote, de l'assurance et du jeu.
La fa?on de gérer les frais de transaction de crypto-monnaie, comment réduire les co?ts de transaction
Aug 06, 2025 pm 11:45 PM
La sélection d'un échange approprié peut réduire les co?ts de transaction. Les plates-formes grand public telles que Binance, OKX et Huobi fournissent des structures de taux différentes et des remises de devises de la plate-forme; 2. La priorité est donnée à l'utilisation de commandes limites comme ordres en attente pour bénéficier de tarifs inférieurs, éviter une utilisation fréquente des commandes du marché, ce qui entra?ne des frais d'alimentation de haut niveau; 3. Concentrer les transactions pour augmenter le volume des transactions, atteindre le niveau VIP et bénéficier de remises d'échelle et activer la fonction de déduction des frais en détenant des pièces de plate-forme (telles que BNB, OKB, HT); 4. Faites attention aux activités d'échange officielles, participez à des concours commerciaux, aux plans de remise ou aux activités zéro à durée limitée pour réduire les co?ts; 5. Optimiser les stratégies de retrait, choisir des devises à faible co?t et réseauter les périodes de non-congestion pour retirer de l'argent et réduire le nombre de retraits fréquents à petite échelle, réduisant ainsi les dépenses globales.
